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