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

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

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

如下面的效果示例:

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

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

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

具体示例代码如下

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

 

posted @ 2014-09-06 21:25  Summer_cool  阅读(12754)  评论(0编辑  收藏  举报