bootstrap 弹窗后遮罩层_bootstrap弹出层去掉遮罩层 - CSDN
  • bootstrap3官网明确指出 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。 开发过程中经常会遇到在一个模态框上弹出另一个模态框, ...

    bootstrap3官网明确指出

    千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

    bootstrap3相关源码分析

    开发过程中经常会遇到在一个模态框上弹出另一个模态框,

    bootstrap.css中 模态框的z-index为1050

    .modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      display: none;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      outline: 0;
    }
    遮罩层z-index为1040

    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1040;
      background-color: #000;
    }

    分析之后的解决方案

    那么要想再添加模态框的遮罩层覆盖上一个的模态框,那么这时的遮罩层的z-index必须大于上一个模态框的z-index,并且新的模态框的z-index也必须改变;所以:

    var modalLen = $(".modal-backdrop").length,
              zIndex = $(".modal-backdrop").eq(0).css("z-index");
          for(var i = 1; i < modalLen; i ++){
            $(".modal-backdrop").eq(i).css({
              "z-index": zIndex + i * 10 + 1
            });
            $(".modal.in").eq(i).css({
              "z-index": zIndex + (i + 1) * 10 + 1
            });
          }
    注意:此种方式的必须注意一点的是  新弹出的模态框div必须在上一个模态框div的后面

    把上面的代码放在 bootstrap.js这句代码的前面

    var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })






    展开全文
  • 项目中需要用到一个颜色选择器,我用的jscolor,感觉很简单也很好用,引进一个js文件,然后直接input就可以使用了 <script src="${ctx}/rs/js/jscolor.js" type="text/javascript">...

    项目中需要用到一个颜色选择器,我用的jscolor,感觉很简单也很好用,引进一个js文件,然后直接input就可以使用了

     

     

    <script src="${ctx}/rs/js/jscolor.js" type="text/javascript"></script>

     

     <div class="col-sm-6  ">
              <input class="jscolor" value="${ busiTemplateLayout.titleBgColor }" name="titleBgColor">
            </div>


    但是在使用的过程中,出现了一个很蛋疼的问题,就是bootstrap的遮罩层,挡住了弹出的颜色选择器的面板,在网上找了很久的资料,大多的方法都是给弹出层设置z-index:9999;设置为最高,但是我设置的时候一直没有反应,然后没办法,我直接去引入的js文件里面去找那个z-index属性去了,还真给我找到了,

     

    如图,直接给它改成9999,解决!!!

     

     

    展开全文
  • <div class="modal fade" id="loadingModal" data-backdrop="static" data-keyboard="false"> <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center;...
    <div class="modal fade" id="loadingModal" data-backdrop="static" data-keyboard="false">
        <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
            <div class="progress progress-striped active" style="margin-bottom: 0;">
                <div class="progress-bar" style="width: 100%;"></div>
            </div>
            <h5 style="color: #ffffff;">数据导入中...</h5>
        </div>
    </div>
    $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    $("#loadingModal").modal('show');
                    $("#myModal").css("z-index","1030"); //被遮罩层的z-index小于遮罩层        

     

    转载于:https://www.cnblogs.com/zhuwenxia/p/9596665.html

    展开全文
  • 主要是.modal('hide');的位置改一下就好了,网上看有的人用remove()方法,试了一下,好像就算关掉了阴影下拉条都不见了。  

    主要是.modal('hide');的位置改一下就好了,网上看有的人用remove()方法,试了一下,好像就算关掉了阴影下拉条都不见了。

    图片

    图片

     

    展开全文
  • bootstrap弹窗控件进行了二次封装,封装成插件以方便调用. 代码如下 调用demo: $(function () { /** *打开模态框 */ $("#btnOpen").click(funct
  • .modal-backdrop { opacity: 0 !important; filter: alpha(opacity=0) !important; } 去掉之前: 去掉之后:
  • 最近一直在用bootstrap开发前端,也是比较苦恼。 开发中纠结于没有公共的标准提示弹窗,所以只能自己写一个(能力不是很好。。第一次造轮子,也不知道算不算轮子) 下面是代码: 1.初始化模态框dom 用时间戳作为 ...
  • 模态框默认情况,当点击遮罩层或者按下esc键时会关闭模态框,项目需求当点击的时候不关闭,自己用了两种办法解决。第一种:直接添加属性 data-backdrop="static" data-keyboard="false"&lt;...
  • bootstrap在多次弹窗后导致了内容区左移动了,如下: 最后只要加上如下代码,就可以了 body{ padding-right: 0!important; } 同时,在默认的弹窗是右边的滑轮是不能滑动的 .modal-open { ...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="...-- Meta, title, CSS, favicons, etc....
  • bootstrap默认状态下点击弹出框周围的遮罩会自动关闭弹出框,可以通过设置backdrop让点击遮罩时不关闭弹出框。 设置方法有两种: 1直接在弹出框的标签上添加 ...1、点击打开遮罩层按钮 2、弹出一个隐藏的div...
  • 前两天,用公司封装的框架,写了一个弹框,两个弹框操作相隔时间很短,第二个弹框出现遮罩层。 // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭滚动条不好使。然后f12查看,发现modal-open未关闭,...
  • 在modal框上弹出modal框的时候效果如下 如大家所见,下层并没有进行遮罩,原因是最上层的modal的z-index需要....modal-backdrop {//bootstrap遮罩属性 position: fixed; top: 0; right: 0; bottom: 0; lef...
  • 想要点击modal的遮罩层时,不关闭modal。一,用 js 调用打开modal需要在js调用modal打开事件时,添加参数如下: $("#myModal").modal({backdrop:'static',keyboard:false});二,data-toggle 打开modal需要在 触发 ...
  • 主要原因是我们把模态框放到了form中 提交表单刷新了页面 所以形成了一闪而过的效果 主要的解决方案 给按钮的type=“button" 改成这个 或者给form表单加一个οnsubmit="return false
  • Bootstrap自定义模态框...去掉遮罩层 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <link rel="styles
  • 1.页面加载完成时弹出模态框: $(function(){  $('.modal').modal({  show:true,  backdrop:true  }) }); 2.输入完成点击确定按钮时关闭... $("#button").click(function(){  $("#loginModal").modal('hide');
  • 模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: ...//确实关闭了 遮盖也消失了 但是第二次再打开模态框的时候 就会一闪而过2、$("button .close").clic...
  • 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙效果:在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙样式“modal-backdrop”,只不过他默认情况下是全屏黑色的: (## 注意这里是: ....
  • 只需要在css中添加 .modal-backdrop{z-index:0;} 即可   &lt;div class="personalinfo" hidden&gt; &lt;ul class=""&gt; &lt;li data-toggle="...@
1 2 3 4 5 ... 18
收藏数 348
精华内容 139
关键字:

bootstrap 弹窗后遮罩层