Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to show hyperlinks in JavaScript alert?
JavaScript's native alert() function only displays plain text and doesn't support clickable hyperlinks. To show hyperlinks in alert-style dialogs, we use the jQuery UI dialog API, which creates customizable modal windows that can contain HTML elements including clickable links.
The standard JavaScript alert box is intentionally limited to text-only content for security reasons. However, jQuery UI provides a flexible alternative that allows rich content while maintaining the alert-like behavior users expect.
Limitations of JavaScript alert()
The native window.alert() method only accepts string parameters and renders them as plain text. Any HTML tags are displayed literally rather than being interpreted as markup.
<!DOCTYPE html>
<html>
<head>
<title>Native Alert Limitation</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
// HTML tags are displayed as text, not rendered
alert('Visit <a href="https://tutorialspoint.com">TutorialsPoint</a> for more tutorials');
}
</script>
</body>
</html>
Using window.confirm() for Basic Interaction
The window.confirm() method provides slightly more interaction by returning a boolean based on user choice, but still doesn't support HTML content.
<!DOCTYPE html>
<html>
<head>
<title>Confirm Dialog Example</title>
</head>
<body>
<button onclick="confirmAction()">Open New Tab</button>
<script>
function confirmAction() {
if(window.confirm("Do you want to open a new tab with the current page?")) {
window.open(document.URL, '_blank');
}
}
</script>
</body>
</html>
Creating Hyperlinks with jQuery UI Dialog
jQuery UI's dialog component allows us to create modal windows with full HTML support, including clickable hyperlinks. This requires including the jQuery and jQuery UI libraries.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks in Dialog</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>
<button id="showDialog">Show Dialog with Links</button>
<div id="dialogBox" title="Useful Links" style="display: none;">
<p>Visit these helpful resources:</p>
<ul>
<li><a href="https://tutorialspoint.com" target="_blank">TutorialsPoint</a></li>
<li><a href="https://jquery.com" target="_blank">jQuery Documentation</a></li>
<li><a href="#" onclick="window.open(document.URL, '_blank')">Duplicate This Page</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#showDialog").click(function() {
$("#dialogBox").dialog({
width: 400,
height: 250,
modal: true,
resizable: false,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});
});
</script>
</body>
</html>
Advanced Dialog with Dynamic Content
You can also create dialogs with dynamically generated hyperlinks based on current page context or user data.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Dialog Content</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>
<button onclick="showDynamicDialog()">Show Current Page Options</button>
<div id="dynamicDialog"></div>
<script>
function showDynamicDialog() {
const currentUrl = document.URL;
const pageTitle = document.title;
const dialogContent = `
<h3>Current Page: ${pageTitle}</h3>
<p>Choose an action:</p>
<p><a href="${currentUrl}" target="_blank">Open in New Tab</a></p>
<p><a href="mailto:?subject=${pageTitle}&body=Check out this page: ${currentUrl}">Share via Email</a></p>
<p><a href="https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}" target="_blank">Share on Twitter</a></p>
`;
$("#dynamicDialog").html(dialogContent);
$("#dynamicDialog").dialog({
title: "Page Actions",
width: 450,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
}
</script>
</body>
</html>
Key Differences
| Feature | Native alert() | jQuery UI Dialog |
|---|---|---|
| HTML Content | No | Yes |
| Hyperlinks | No | Yes |
| Customization | Limited | Extensive |
| External Dependencies | None | jQuery + jQuery UI |
Conclusion
While JavaScript's native alert cannot display hyperlinks, jQuery UI dialogs provide a powerful alternative for creating interactive modal windows with clickable links. Use jQuery UI dialogs when you need rich content and user interaction beyond simple text alerts.
10K+ Views
