bootstrap模态框的实现原理

qq_25988979 2015-02-12 03:30:41
实现思路:
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();
}
本文出自:http://www.codepub.com/
...全文
200 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
jeky_zhang2013 2015-02-15
  • 打赏
  • 举报
回复
帮顶下,都看不到红色的部分
  • 打赏
  • 举报
回复
接分

37,743

社区成员

发帖
与我相关
我的任务
社区描述
JavaScript,VBScript,AngleScript,ActionScript,Shell,Perl,Ruby,Lua,Tcl,Scala,MaxScript 等脚本语言交流。
社区管理员
  • 脚本语言(Perl/Python)社区
  • WuKongSecurity@BOB
加入社区
  • 近7日
  • 近30日
  • 至今

试试用AI创作助手写篇文章吧