首页 > 解决方案 > 模态对话框不会随 stopPropogation 关闭

问题描述

我有以下对话框:

<div class="modal fade PSettings" id="ModalMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

这是我的jQuery代码:

    $(".btn").click(function (evt) {

    var wID = $('#MPID :selected').val();

    if (wID.length == 0) {

      evt.preventDefault();

      $('#ModalMsg .modal-body').html('<p><b>Please select a valid name from the drop down list.</b></p>');

      $('#ModalMsg').modal({
        backdrop: 'static',
        keyboard: false,
        show: true
      });

      evt.stopPropagation();

    }
});

我遇到的问题是我喜欢显示对话框并让用户能够单击“关闭”按钮。当用户点击关闭按钮时没有任何反应。

单击关闭按钮后,我喜欢停止传播,因为单击按钮会触发另一个动作。

标签: jquerytwitter-bootstrapmodal-dialog

解决方案


如果您只想控制隐藏/显示模式事件,我认为您不需要对所有事件/侦听器进行操作。对模态使用“hide.bs.modal”事件。它会触发您尝试关闭模态的时间。在此函数中返回 true 或 false 将启用或禁用关闭模式。

$(".modal").on("hide.bs.modal", function(){
    return false; // you should return true if you want to close dialog, otherwise you should return false 
                // so change 'false' in my example to your conditions
});

推荐阅读