当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-07

    本文导语:  实现思路: 1、需要有一个层将body遮住,放在body上方。 2、修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 代码如下:.cover {position:fixed; top...

实现思路:

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;
}

网页部分的代码

代码如下:

  


    

    点我显示遮罩层

  

  


js部分的代码

代码如下:

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

    
 
 

您可能感兴趣的文章:

 
本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • 一JSP网站,统一指定一个errorPage页面,统一处理异常,在指定的errorPage页面中,我想知道具体是哪个页面出错的,即想知道出错页面的具
  • JavaScript实现页面跳转的几种方法(参考代码)
  • 求救!weblogic6.0后台运行正确,前台页面跳转或调用其他页面时出“页面无法显示错误”
  • HTML 5 <base> 标签-规定页面中所有链接的基准 url
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • HTML <!DOCTYPE> 标签用法详解及如何解决<!DOCTYPE html>未声明时导致页面无效的问题
  • 请问applet怎么能与所在的页面进行通讯 即从页面中取得变量和把返回值返回给页面?
  • 页面刷新问题:所有的页面在打开时无论传递的参数是什么,打开的总是上一次打开页面的内容,必需刷新之后才能看到实际的网页。
  • 如何在让表单的提交页面出现在框架页面中。
  • 如何能够只打印,页面上的表格,页面上的上一页,下一页,还有按钮不打印
  • 请问怎么样能自动定向到另一个页面并且给那个页面传参数呀?
  • 诸位大瞎:jsp中不能写方法,可能是因为这个页面里的所有语句都在某个方法中。 我想问一下,怎么复用某个页面里的程序呢? 不用 bean,因为程序要显示很多 html,用 include 也不行,因为 页面有传入参数。
  • 在JSP中如何从一个页面转向另一个页面?
  • 为何我使用javascript中location'****.jsp'跳到某一页面,jsp页面不重新编译执行
  • ?启动jsp页面时,让页面刷新(一次)?
  • 当我修改了一个jsp文件之后刷新页面,为什么页面上的内容没有更新的呢?
  • jsp对页面的大小有否限制,我的页面在60多K之后就断掉了!!!
  • 改变一系列页面的页面风格问题
  • 让JSP页面过期, 保证每次JSP页面都是最新的.
  • JSP中如何在一页面执行后导入另一页面?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号