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

 

转载于:https://www.cnblogs.com/summer-cool/p/3959835.html