项目需求:扫描二维码,付款后,向服务器发送请求(每5s一次)交易信息,弹出模态框(重点是,付一次弹出一次)无数个模态框啊···。其次手动关闭每个模态框,当最后一个的时候关闭大遮罩层。
遇到的问题(1):无法给append出来的按钮元素添加点击事件,看都网上有live,bind,但是我这里不好使,所以还是用事件委托
解决代码(1):
$("#exampleModalLong-2").on('click', '.btnClose', function () {
})
//模态框的id 点击事件 目标元素 函数
遇到问题(2):如何设置多个模态框,手动点击关闭每一个模态框
解决代码(2):将遮罩层留在外面,作为append的目标点,然后不断向其中增加 ${html}
html代码(引用的是bootstrap的模态框):
<div class="modal fade show" id="exampleModalLong-2" tabindex="-1" role="dialog" style="z-index:100000;display: none;background: rgba(78,78,78,0.6);position: fixed;"></div>
js代码(手动点击关闭每个模态框两种方法):
第一个笨方法:通过获取当前要关闭模态框,通过向上寻找兄弟节点,如果兄弟节点为0的时候,说明是最后一个模态框,关闭遮罩层,否则只关闭当前模态框,代码如下
$("#exampleModalLong-2").on('click', '.btnClose', function () {