0

How do i open a Bootstrap Modal when the user is trying to refresh or leave the page? The Modal should say something like: '“Are you sure you want to navigate away from this page? ”

I've following Code: 

window.onbeforeunload = function() {
  $('#myModal').modal("show");
  return "Data will be lost if you leave the page, are you sure?";
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        Are you sure you want to navigate away from this page?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No I want to stay</button>
        <button type="button" class="btn btn-primary">Yes, I'm sure</button>
      </div>
    </div>
  </div>
</div>

But with this codesnippet the modal opens but the page refreshes anyways.

user7637745
  • 965
  • 2
  • 14
  • 27
browntoast
  • 87
  • 1
  • 11
  • 1
    RTFM? [WindowEventHandlers.onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload). You can show that modal but for more than 7 years now you can't make any decisions with it. You're not returning anything from your function, that's why navigation is not interrupted. – gforce301 Jul 05 '18 at 17:22
  • `window.onbeforeunload = function(event)` This function needs to execute `event.preventDefault()` (based on the user's response) to stop navigation. – connexo Jul 05 '18 at 17:27

1 Answers1

1

The unload event will fire when a user tries to navigate away. However, if you use a DIV as a pop-up the browser will navigate away before the user has a chance to read it. To keep them there you'd have to use a alert/prompt/confirm dialog boxes.

Binding to a html has worked very well for me instead of unload.

Full Reference:https://stackoverflow.com/a/30603477/1081909

 

$("html").bind("mouseleave", function () {
  $('#myModal').modal("show");
  $("#okButton").click(function(){
    location.reload();
}); 
  //$("html").unbind("mouseleave");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Are you sure you want to navigate away from this page?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No I want to stay</button>
            <button id="okButton" type="button" class="btn btn-primary">Yes, I'm sure</button>
          </div>
        </div>
      </div>
    </div>
NullPointer
  • 7,094
  • 5
  • 27
  • 41