JavaScript Popup Alert on Link Click
Contents
JavaScript Popup Alert on Link Click
Hello Reader,
While working on one of the task, I came across a requirement to open a pop up message before redirecting the user to a specific link. So we would be working with some javascript code to open a popup alert when anyone clicks on a link.
JavaScript popup alert on link click #javascript #alert #popup Click To Tweet
JavaScript alert popup
You can simply achieve this in JavaScript as shown below:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> function AlertMsg() { var answer = confirm ("You are getting redirected. Click OK to continue.") if (answer) window.location="http://www.dipendrashekhawat.com"; } </script> <a href="javascript:AlertMsg();">Click Here</a> |
You can use the onclick attribute, just return false if you don’t want continue;
|
1 2 3 4 5 6 |
<script type="text/javascript"> function confirmMsg(node) { return confirm("You are getting redirected. Click OK to continue."); } </script> <a href="http://www.dipendrashekhawat.com" onclick="return confirmMsg(this);">Click Here</a> |
If you only want a single button instead of confirm use alert(). It only has an “ok” button.
Full Implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>JavaScript Popup Alert on Link Click - Dipendra Shekhawat</title> </head> <body> <style> #clickhere { color: #3b5998; text-decoration: underline; } #clickhere:hover { cursor: pointer; text-decoration: none; color: #3b5998; } </style> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="ConfirmationDialog" class="ModalBackground" style="display: none;"></div> <span id="clickhere" onclick="javascript:alertMsg();">Click Here</span> <script type="text/javascript"> function alertMsg() { var modalHTML = ''; modalHTML += '<div id="ConfirmationMessage">' + 'You will be redirected to another website. Click OK to continue.</div>' $('#ConfirmationDialog').html(modalHTML); $("#ConfirmationDialog").dialog({ modal: true, title: 'Confirmation Message', width: 500, resizable: false, buttons: { "Ok": function () { $('#ConfirmationDialog').dialog("close"); window.open("http://dipendrashekhawat.com", "_blank") }, Cancel: function () { $('#ConfirmationDialog').dialog("close"); } } }); } </script> <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script> </body> </html> |
Live Demo
Hope you are able to follow this post on javascript popup alert on link click. You can refer to other posts on JavaScript here – Recommended posts on JavaScript.
What do you think?
Dear Reader,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.
Happy Reading!
About Author
Dipendra
Hey Reader! I am Dipendra Shekhawat, a full time software developer and part time blogger from Pune, India. I write about technologies like WordPress, ASP.NET, C#, JQuery, HTML, CSS, AJAX, WCF, Web Services. I have started this blog to share my knowledge and help others to learn.
