欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题

程序员文章站 2023-12-03 23:44:34
 上篇提到的' bootstrap modal 多弹窗之叠加关闭阴影遮罩问题' 我总结了下,对于modal多窗口叠加引起的遮罩,滚动条,无法弹出窗口的问题...

 上篇提到的' 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 多弹窗之叠加引起的滚动条遮罩阴影问题,希望对大家有所帮助