How to show hyperlinks in JavaScript alert?

Javascript Web Development Front End Technology

We use the dialog API of jQuery UI to show hyperlinks in JavaScript alerts. JavaScript does not allow putting clickable hyperlinks in the alert box. The closest functionality that plain JavaScript provides is a confirm box using the window.confirm() method.

We will be using the jQuery library to show hyperlinks in JavaScript alerts. It is a library for JavaScript to traverse HTML documents as well as manipulate them, create animations, and much more. One such feature is a custom dialog box that we will be using.

An alert is a message for the user that requires immediate attention. An alert box usually shows some kind of warning therefore it is intentionally not suited to show clickable hyperlinks. Another kind of dialog box can be used to show hyperlinks.

A confirmation dialog box, as the name suggests, is used for taking confirmation from the user before performing a particular action. Let us first see how the confirmation dialog works.

Using the window.confirm() Method

The window.confirm() method takes as a parameter a string message that needs to be displayed in the confirmation dialog box. It returns a boolean value depending on the choice selected by the user. This return value can be used in a conditional statement to perform an action.

Syntax

if(window.confirm(" Confirm box message ")){
   // action you want to perform
}

The boolean value returned by the window.confirm() is evaluated by the if statement and the action is either performed or not.

Example 1

In the below code snippet we will create a button that tries to replicate the current tab. A confirmation dialog box will pop up to which the user has to respond.


<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <center>
      <p>This button will create a new browser tab with the same content. </p>
   </center>
   <div id = "url"></div>
   <script>
      var url = document.URL;
      document.getElementById("url").innerHTML = "URL: " + str;
      function replicateTab(){
         if(window.confirm("Are you sure you want to replicate ?")){
            window.open(url);
         }
      }
   </script>
   <center>
      <button id = "button" onclick = "replicateTab()">Click me to replicate ! </button>
   </center>
</body>
</html>

The replicate button triggers replicateTab() JavaScript function which creates a confirm box in response to which the tab is either replicated or not.

The hyperlinks in JavaScript alert using jQuery

We will be using the jQuery UI dialog API to create a custom alert box. jQuery allows flexibility of putting hyperlinks in dialog box. The dialog box created using jQuery is much more customisable and user friendly than plain JavaScript. Unlike alert box in JavaScript, jQuery offers dialog box that can be moved, resized as well as customised with CSS.

We use selectors in jQuery for manipulating different HTML elements using class, id etc. Selectors are part of the jQuery framework that make it easy to navigate as well as manipulate HTML documents. Notice that these selectors are similar to CSS selectors.

$(selector).dialog(options)

where selector can be a class, id or tag. This line creates a dialog box in jQuery using the selector provided. The dialog API of jQuery provides a lot of different functionality such as title, buttons, width, height etc.

This pattern of referencing to various HTML elements in the document using selectors is a common feature of jQuery. We will be using it to refer to other parts of the script but in a different way than JavaScript due to the added abstraction of jQuery.

Example 2

Here we are going to create a custom alert box in jQuery and attach it to the body of the HTML document. The dialog box contains a clickable hyperlink that duplicates the current tab. Before executing any script code, we first check that the DOM (Document Object Model) is ready or not. This is done with the help of jQuery(document).ready() function. When the state of readiness is achieved, the block of code provided as the argument inside ready() runs. Here we will provide a function that shows a clickable hyperlink in the custom alert dialog box.

Note − we have to import the jQuery, jQuery UI, and jQuery UI stylesheet by providing the respective links.

Let’s look at the code for same.


<!DOCTYPE html>
<html>
<head>
   <title>Online Javascript Editor</title>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
   <div id="alertBox">
      <a id="myLink" target="_blank">New Tab</a>
   </div>
   <script>
      $(document).ready(function() {
         var url = document.URL;
         
         // attach the current document URL to the anchor element
         $("#myLink").attr("href", url);
         $("#alertBox").dialog({
            title: "Create duplicate tab ?",
            minWidth: 200
         });
      });
   </script>
</body>
</html>

In the above code, we refer to the body of HTML document using the selector pattern of jQuery and attach the document URL to the <a> element.

Note − Alert box is a part of dialog box which is a modal window. These type of windows take complete focus when they are rendered and are not closed until an action is performed on the box thereby preventing the user from interacting with the webpage. Such type of UI elements should be used only for important alerts and warnings.

Conclusion

Alert box in JS are used to show important messages, alerts or warnings. They should be used wisely at appropriate locations to enhance the user experience.