zoukankan      html  css  js  c++  java
  • python测试开发django187.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')
       })
    });
    
  • 相关阅读:
    .net SMTP发送Email 更新(可带附件)
    Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强
    使你更有思想的20本书
    Sencha Architect 2 的使用
    Test SRM Level One: TemperatureScales
    Test SRM Level Two: CountExpressions, Brute Force
    JPDA 利用Eclipse和Tomcat进行远程调试 --转
    非对称加密算法RSA--转
    java/php/c#版rsa签名以及java验签实现--转
    JAVA/PHP/C#版RSA验签--转
  • 原文地址:https://www.cnblogs.com/yoyoketang/p/15769361.html
Copyright © 2011-2022 走看看