python測試開發django-187.Bootstrap模態框(modal)如何在關閉時觸發事件

前言

Bootstrap 模態框 (modal) 在關閉時，如何觸發一些事件?比如重置表單，或者重置表單的校驗。
Bootstrap 模態框 (modal) 提供了4個顯示和隱藏模態框的事件。這些事件可在函數中當鈎子使用。

modal 事件

下表列出了模態框中要用到事件。這些事件可在函數中當鈎子使用。

事件	描述	實例
show.bs.modal	在調用 show 方法后觸發。	$('#identifier').on('show.bs.modal', function () {// 執行一些動作...})
shown.bs.modal	當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。	$('#identifier').on('shown.bs.modal', function () {// 執行一些動作...})
hide.bs.modal	當調用 hide 實例方法時觸發。	$('#identifier').on('hide.bs.modal', function () { // 執行一些動作...})
hidden.bs.modal	當模態框完全對用戶隱藏時觸發。	$('#identifier').on('hidden.bs.modal', function () {// 執行一些動作...})

hide 觸發

當點擊隱藏模態框的時候觸發

當點擊右上角x按鈕，或者點取消的時候調用hide.bs.modal會觸發

<script>
// 模態框觸發鈎子 hide.bs.modal
$(function() {
    $('#myModal').on('hide.bs.modal',
    function() {
        alert('隱藏模態框的時候會觸發這個事件....');
    })
});
</script>

在調用hide方法時候也會觸發

$('#myModal').modal('hide')

hidden 完全隱藏模態框觸發

hide.bs.modal 是模態框消失之前觸發
hidden.bs.modal是模態框完全消失后觸發

<script>
// 模態框觸發鈎子 hide.bs.modal
$(function() {
    $('#myModal').on('hidden.bs.modal',
    function() {
        alert('隱藏模態框的時候會觸發這個事件....');
    })
});
</script>

關閉模態框銷毀校驗

模態框在關閉的時候可以執行重置校驗，關於重置校驗方法，可以參考前面這篇https://www.cnblogs.com/yoyoketang/p/15745490.html

$(function() {
    $('#myModal').on('hidden.bs.modal', function() {
        // 銷毀校驗
        var $form = $('#modal-form');
        $form.data('formValidation').destroy();
        $form.data('formValidation', null);
        // 重新調用校驗方法
        validate_module_form('#modal-form')
   })
});