Alert Before Leaving A Web Page Using JavaScript – jQuery

By Saruque Ahamed Mollick

In 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

alert before leaving page in javascript

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.

Leave a Reply

Your email address will not be published. Required fields are marked *