Как определить способ закрытия модального Bootstrap - PullRequest
Новая
       7

Как определить способ закрытия модального Bootstrap

0 голосов
/ 21 января 2019

Я присоединяю обработчик к событию Bootstrap hidden.bs.modal, чтобы определить, когда модальное окно закрыто, но его можно закрыть несколькими способами:

  1. Явно закройте его через $('#modal').modal('hide') или $('#modal').modal('toggle');
  2. Нажатие на фоновую часть модала (если разрешено);
  3. Через атрибуты данных, например, data-dismiss="modal"

Есть ли способ определить, какой из вариантов был использован? Внутри hidden.bs.modal обработчик e.target всегда выглядит как div#modal

1 Ответ

0 голосов
/ 21 января 2019

Дело в том, что hidden.bs.modal - это событие, которое срабатывает после закрытия модала.Так что это не событие click, которое пользователь вызвал с помощью кнопки закрытия, угла X или наложения ...

Тем не менее, вы можете использовать событие click, чтобы сохранить то место, где пользователь щелкнулпеременная и миллисекунд после того, как hidden.bs.modal сработает, используйте переменную.

Демо: 

$(document).ready(function(){

  // Variable to be set on click on the modal... Then used when the modal hidden event fires
  var modalClosingMethod = "Programmatically";

  // On modal click, determine where the click occurs and set the variable accordingly
  $('#exampleModal').on('click', function (e) {

    if ($(e.target).parent().attr("data-dismiss")){
      modalClosingMethod = "by Corner X";
    }
    else if ($(e.target).hasClass("btn-secondary")){
      modalClosingMethod = "by Close Button";
    }
    else{
      modalClosingMethod = "by Background Overlay";
    }

    // Restore the variable "default" value
    setTimeout(function(){
      modalClosingMethod = "Programmatically";
    },500);
  });

  // Modal hidden event fired
  $('#exampleModal').on('hidden.bs.modal', function () {
    console.log("Modal closed "+modalClosingMethod);
  });

  // Closing programmatically example
  $('#exampleModal').modal("show");
  setTimeout(function(){
    $('#exampleModal').modal("hide");
  },1000);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CodePen

...