收藏 分销(赏)

页面遮罩层-并且阻止页面body滚动bootstrap模态框原理.doc

上传人:人****来 文档编号:9754490 上传时间:2025-04-06 格式:DOC 页数:1 大小:13.50KB
下载 相关 举报
页面遮罩层-并且阻止页面body滚动bootstrap模态框原理.doc_第1页
第1页 / 共1页
本文档共1页,全文阅读请下载到手机保存,查看更方便
资源描述
  实现思路:   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();   }   更多信息请查看IT技术专栏   
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传
相似文档                                   自信AI助手自信AI助手

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2025 宁波自信网络信息技术有限公司  版权所有

客服电话:4009-655-100  投诉/维权电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服