jquery - 模态对话框不会随 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();
}
});
我遇到的问题是我喜欢显示对话框并让用户能够单击“关闭”按钮。当用户点击关闭按钮时没有任何反应。
单击关闭按钮后,我喜欢停止传播,因为单击按钮会触发另一个动作。
解决方案
如果您只想控制隐藏/显示模式事件,我认为您不需要对所有事件/侦听器进行操作。对模态使用“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
});
推荐阅读
- javascript - 将 HTML 表格数据获取到条形图中
- angular - 角度:对 Laravel-API 的后请求在 Postman 中工作时不起作用
- html - Chrome:为什么从 Web 服务器提供 html 与从文件加载时缺少边距/填充?
- sql - 如何查询该列的任何行中都不存在特定数字的列
- flutter - 在返回列表之前等待流停止
- javascript - Express MIME 类型 ('text/html') 上的 Webpack 不可执行
- c++ - 抑制函数返回的“避免未命名对象”警告
- swift - 从 iOS Swift 上传 S3 - AWSS3TransferUtility 未上传
- python - 绘制分类数据的分组条形图
- google-search - robots.txt 中的 /somedir/ 和 /somedire/* 有什么区别?