• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理

    实现思路:

    1、需要有一个层将body遮住,放在body上方。

    2、修改body的overflow属性值为:hidden

    废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie

    遮罩层的样式代码,红色部分是关键的部分

    复制代码 代码如下:

    .cover {
    position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;
    z-index: 1002; left: 0px; display:none;
    opacity:0.5; -moz-opacity:0.5;
    }

    网页部分的代码

    复制代码 代码如下:

    body>

      div class="container" style="height:2000px;">
        div style="height:1000px;">/div>
        a href="javascript:;" onclick="showMask()" >点我显示遮罩层/a>br />
      /div>
      div id="cover" class="cover">/div>
    /body>

    js部分的代码

    复制代码 代码如下:

    function showMask(){
    $('body').css("overflow","hidden")
    $("#cover").show();
    }

    您可能感兴趣的文章:
    • Bootstrap每天必学之模态框(Modal)插件
    • 浅析BootStrap中Modal(模态框)使用心得
    • Bootstrap 模态框(Modal)带参数传值实例
    • bootstrap模态框消失问题的解决方法
    • Bootstrap模态框(modal)垂直居中的实例代码
    • 在iframe中使bootstrap的模态框在父页面弹出问题
    • bootstrap 模态框(modal)实现水平垂直居中显示
    • BootStrap 模态框实现刷新网页并关闭功能
    • Bootstrap模态框禁用空白处点击关闭
    • Bootstrap实现模态框效果
    上一篇:用css截取字符的几种方法详解(css排版隐藏溢出文本)
    下一篇:CSS可以做的几个令你叹为观止的实例分享
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理 页面,遮罩层,并且,阻止,