html/css实现阴影蒙版覆盖原网页并显示浮框的功能
2014-09-06 21:25
549 查看
在提供用户修改资料/密码等功能的时候,往往希望给用户这样的使用体验,在不跳转,不弹框的情况下完成对这些功能的操作。
这可以通过一种效果来实现,在同一页面下阴影覆盖整个当前网页并使得原网页中元素无法使用,同时让可以使用的特定的修改框浮于阴影之上
如下面的效果示例:
思路是设置一个div作为body元素的直接子元素,让其width和height均为100%,然后让它在一开始处于隐藏状态,而中间修改框页同样在一开始隐藏。
此外,两者均使用绝对定位position:absolute;以使其脱离html的文档流从而不影响其他后续元素的定位。
然后加入与按钮绑定的js函数用于控制它们的显示与隐藏(修改display属性即可)。至于为什么后面原网页的那些元素都用不了呢,是因为他们都被那个width和height均为100%的div给盖住了。盖的方式通过调节z-index属性得到,当然,浮于上面的修改框该值更大。
具体示例代码如下
可以参考http://www.csharpwin.com/dotnetspace/2415.shtml
这可以通过一种效果来实现,在同一页面下阴影覆盖整个当前网页并使得原网页中元素无法使用,同时让可以使用的特定的修改框浮于阴影之上
如下面的效果示例:
思路是设置一个div作为body元素的直接子元素,让其width和height均为100%,然后让它在一开始处于隐藏状态,而中间修改框页同样在一开始隐藏。
此外,两者均使用绝对定位position:absolute;以使其脱离html的文档流从而不影响其他后续元素的定位。
然后加入与按钮绑定的js函数用于控制它们的显示与隐藏(修改display属性即可)。至于为什么后面原网页的那些元素都用不了呢,是因为他们都被那个width和height均为100%的div给盖住了。盖的方式通过调节z-index属性得到,当然,浮于上面的修改框该值更大。
具体示例代码如下
可以参考http://www.csharpwin.com/dotnetspace/2415.shtml
相关文章推荐
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- JavaScript+Css+Html实现网页换皮肤功能
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- JavaWeb基础知识:Html和Css实战WebView实现手机显示网页
- 用简单的css实现html网页动态电子相册的功能
- CGI编程 - c语言实现 :网页显示HTML代码的问题
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- 用JavaScript结合CSS实现网页换肤功能
- Html网页实现键盘Enter响应功能
- Javascript+css 实现网页换肤功能
- 写一个HTML页面,实现以下功能,左键点击页面时显示“你好”,右键点击时显示“禁止右键”。
- HTML+CSS实现合并图片的切割显示以及背景渲染
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能
- xml学习(三)---利用xml文件实现数据岛功能(网页显示xml文件中的内容免C#代码操作xml文件)
- 写一个HTML页面,实现以下功能,左键点击页面时显示“您好”,右键点击时显示“禁止右键”。并在2秒钟后自动关闭页面
- Javascript+css 实现网页换肤功能
- 在html静态网页中实现include包含功能
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能 activeandbadboy [原作]
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能