Откройте BS Modal при обновлении страницы и спросите, уверен ли пользователь - PullRequest
Новая
       16

Откройте BS Modal при обновлении страницы и спросите, уверен ли пользователь

0 голосов
/ 05 июля 2018

Как открыть мод Bootstrap, когда пользователь пытается обновить страницу или покинуть ее? Модал должен сказать что-то вроде: «Вы уверены, что хотите уйти с этой страницы? «

У меня следующий код: 

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>

Но с этим codenippet модал открывается, но страница все равно обновляется.

1 Ответ

0 голосов
/ 05 июля 2018

Событие unload сработает, когда пользователь попытается уйти. Тем не менее, если вы используете DIV в качестве всплывающего окна, браузер отключится, прежде чем пользователь сможет прочитать его. Чтобы сохранить их там, вы должны использовать диалоговые окна предупреждения / приглашения / подтверждения.

Привязка к html очень хорошо работает для меня вместо выгрузки.

Полная ссылка: 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>
...