Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017-02-27 11:45
597 查看
上篇提到的' Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题'
我总结了下,对于modal多窗口叠加引起的遮罩,滚动条,无法弹出窗口的问题,查看源代码,我总结了一种方法可以一次性解决所有这些问题,而不影响原有modal功能,并且实现了多窗口叠加。
对于多窗口,如果我们将第二个,乃至第三个,第四个modal的根节点,移植到body下面,就不会出现了以上问题。
具体该如何操作,请看以下代码:
通常我们遇到多弹窗的问题,是出现在modal套modal中,也就是:
<div class='fade modal' id='modal_demo' style='display:none'> <div class='modal-dialog modal-max-lg'> <div class='modal-content'> <div class='modal-header'> <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button> <h4 class='modal-title'>Map Features</h4> </div> <div class='modal-body'> <div> <table> <tr> ..... <td> <div class='fade modal' id='modal_demo' style='display:none'> <div class='modal-dialog modal-max-lg'> <div class='modal-content'> <div class='modal-header'> <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button> <h4 class='modal-title'>Map Features</h4> </div> <div class='modal-body'> ...
第二个窗口是在click事件中,弹出,在第一个modal层上出现。这里,我们可以在common.js中写如下代码:
$('#click_demo').live('click', function(e) { $("#body").append("<div class='fade modal' id='model_dialog'/>"); $("#body").children().last().append($(this).next().html()); $("#body").children().last().modal(); }); $("#click_demo").live('hidden.bs.modal',function(){ $("#body").children().last().remove(); })
click代码:
<div id="click_demo",class="idel",style="display:inline" > <img alt='click details' src="/icons/demo.png" title="click to details"> <div class='fade modal' id='modal_demo' style='display:none'> <div class='modal-dialog modal-max-lg'> <div class='modal-content'> <div class='modal-header'> <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
以上所述是小编给大家介绍的Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
- Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题
- 解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
- Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
- 解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
- 解决上左右页面框架中iframe的引起的滚动条问题
- 谷歌下解决Pop遮罩层无法遮挡滚动条下问题
- firefox下滚动条消失引起页面抖动的问题
- 滚动条引起页面抖动问题
- 解决Bootstrap的row类,引起网页横向滚动条的问题。
- 移动端弹出阴影遮罩的几点问题和解决方法
- 关于bootstrap Modal弹窗 滚动条的问题
- 如何解决CSS3使用:after和:before阴影,由z-index引起的问题
- 关于bootstrap模态框被灰色阴影遮罩挡住问题的分析
- 经典遮罩滚动条问题
- firefox 滚动条消失引起页面抖动的问题
- Bootstrap modal 多弹窗之叠加显示不出弹窗问题
- bootstrap多个模态框嵌套显示,造成的遮罩颜色加深和页面滚动条问题
- Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题
- shape file与coverage叠加的问题