Alert Before Leaving A Web Page Using JavaScript – jQuery
By Saruque Ahamed MollickIn this tutorial, you gonna learn how to give an alert message or alert before leaving page in JavaScript – jQuery.
In the first place, I will like to say that in many cases it is found that users click on a link of a webpage by mistake or close the current tab by mistake. Here, I will show you how to prevent that mistake by adding an alert message or a warning message using JavaScript or jQuery.
Also Read,
How to check if an HTML element is loaded or not using jQuery
How to Hide HTML Element onclick in jQuery Easily
Alert before leaving page in JavaScript – jQuery
<script type="text/javascript">
$(window).on('beforeunload', function(){
var c=confirm();
if(c){
return true;
}
else
return false;
});
</script>The above is the jQuery JavaScript.
If you use this JavaScript in your web page, then it will give you a warning message before leaving that page.
Moreover, If you click on a link or click on something which gonna navigate away from the webpage it will also prompt you.
Below I am providing a full example so that you can understand it properly.
<!DOCTYPE html>
<html>
<body>
<a href="https://google.com">Google</a>
<script type="text/javascript">
$(window).on('beforeunload', function(){
var c=confirm();
if(c){
return true;
}
else
return false;
});
</script>
</body>
</html>
Remeber earlier versions of browsers allowed you to set custom messages in the alert dialog box, But now it’s not possible. The custom alert message can’t be set now. See the special notes added in the bottom of this tutorial post.
Just include your jQuery. (you can use CDN like Google, <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> )
Or you can simply download jquery.min.js and include that.
Now just test it on your browser.
If you click on google link it will prompt you.
Below is the screenshot of the alert message
If you try to close the current tab the same message will appear.
Also Read,
Real Time Chat Application PHP With File Transfer System AJAX
Calculate the distance between mouse and element in jQuery
Special Notes: confirm() method can take messages in the form of string as a parameter, but the newer versions of chrome and other browsers do not allow you to use custom messages in the alert box.
Hi,
it’s about confirm, not alert.
what about “alert”, please ?
The alert could be implemented earlier. But due to security reasons browser does not allow now to do custom alert message. Though you can do this using manual pop message box with JavaScript and CSS.
If I have a login form and I want to avoid to receive the alert only with the login how can I do it.