码迷,mamicode.com
首页 > Web开发 > 详细

html/css实现阴影蒙版覆盖原网页并显示浮框的功能

时间:2014-09-06 22:28:24      阅读:548      评论:0      收藏:0      [点我收藏+]

标签:blog   http   os   io   使用   ar   2014   div   sp   

在提供用户修改资料/密码等功能的时候,往往希望给用户这样的使用体验,在不跳转,不弹框的情况下完成对这些功能的操作。

这可以通过一种效果来实现,在同一页面下阴影覆盖整个当前网页并使得原网页中元素无法使用,同时让可以使用的特定的修改框浮于阴影之上

如下面的效果示例:

bubuko.com,布布扣

思路是设置一个div作为body元素的直接子元素,让其width和height均为100%,然后让它在一开始处于隐藏状态,而中间修改框页同样在一开始隐藏。

此外,两者均使用绝对定位position:absolute;以使其脱离html的文档流从而不影响其他后续元素的定位。

然后加入与按钮绑定的js函数用于控制它们的显示与隐藏(修改display属性即可)。至于为什么后面原网页的那些元素都用不了呢,是因为他们都被那个width和height均为100%的div给盖住了。盖的方式通过调节z-index属性得到,当然,浮于上面的修改框该值更大。

具体示例代码如下

可以参考http://www.csharpwin.com/dotnetspace/2415.shtml

 

html/css实现阴影蒙版覆盖原网页并显示浮框的功能

标签:blog   http   os   io   使用   ar   2014   div   sp   

原文地址:http://www.cnblogs.com/summer-cool/p/3959835.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!