标签:bootstrap-modal twitter-bootstrap twitter-bootstrap-3 javascript jquery
我在另一个模态中有一个模态,并且设法设法使内部一个模态关闭而不影响另一个.问题在于,当第二个模式关闭时,它会为自己和第一个模式触发“ hidden.bs.modal”事件.
<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
<a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
</div>
<!-- My JS-->
$('#btnUploadCancel').click(function () {
$('#uploadImage').modal('toggle');
});
$(document).on('hidden.bs.modal', '#myModal', function () {
alert("hello");
});
$(document).on('hidden.bs.modal', '#uploadImage', function () {
alert("goodbye");
});
这是我制作的jsFiddle example.
这个问题的原因是,仅当第二个模式被隐藏时,我才需要触发一个动作,而当第一个模式被隐藏时,则需要触发其他动作.关于如何使用每个事件来解决此问题的任何想法???
注意:第二个模态必须在另一个模态内,因为它们被称为局部视图.
解决方法:
我猜想这些模式元素是异步引入页面的,这就是为什么您使用绑定到文档的委托事件侦听器,而不是将hidden.bs.modal直接绑定到#myModal和#uploadImage本身.如果不是这种情况,那么您可以直接使用绑定,我建议使用这种方法来捕获#uploadImage本身上的隐藏事件,并使用诸如event.stopPropagation()之类的方法防止它使DOM树冒泡. ;.
但是,您也可以继续将此处理程序委派给文档,并使用传递到处理程序回调中的Event对象的target属性来确定哪个元素是事件的实际来源:
$(document).on('hidden.bs.modal', '#myModal', function (event) {
if (event.target.id == 'uploadImage') {
// do stuff when the upload dialog is hidden.
}
else if (event.target.id == 'myModal') {
// do stuff when the outer dialog is hidden.
}
});
P.S .:您可能已经知道,Bootstrap框架does not support overlapping modal dialogs.请注意这一点,因为您继续将模态嵌套在模态中,尤其是有关通过标记API和data-dismiss =“ modal”初始化的解雇元素的情况.
P.P.S .:
标签:bootstrap-modal,twitter-bootstrap,twitter-bootstrap-3,javascript,jquery 来源: https://codeday.me/bug/20191120/2044284.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。