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')
   })
});