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

时间: 2024-10-19 13:03:00

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

CSS如何控制div固定于网页底部

CSS如何控制div固定于网页底部: 网页设计中可能需要这样的效果,那就是将一个条幅放在网页的最底部,并且在网页滚动的时候能够穿过此条幅. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

CSS中的样式覆盖原则

规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则).CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html> <head> <title>rule 1</title> <style> body {color:black;} p {color:blue;} </style> </head> <body> <p>welcome to <strong>

S1/使用HTML语言和CSS开发商业站点/05-CSS美化网页

<span>标签 在HTML中,<span>标签是被用来组合HTML文档中的行内元素的,它没有固定的格式表示,只有对它应用CSS样式时,他才会产生视觉上的变化. <span>标签可以为<p>标签中的部分文字添加样式,而且不会改变文字的显示方向.他不会像<p>标签和标题标签那样,每对标签独占一个矩形区域. 字体样式 常用字体属性 属性名 含义 举例 Font-family 设置字体类型 Font-family:"隶书"; Fon

Java抓取网页数据(原网页+Javascript返回数据)

转载请注明出处! 原文链接:http://blog.csdn.net/zgyulongfei/article/details/7909006 有时候因为种种原因,我们须要採集某个站点的数据,但因为不同站点对数据的显示方式略有不同! 本文就用Java给大家演示怎样抓取站点的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数据. 一.抓取原网页. 这个样例我们准备从http://ip.chinaz.com上抓取ip查询的结果: 第一步:打开这个网页,然后输入IP:111.142.

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/

CSS+DIV:实现炫酷网页样式与布局

虽然之前也接触过HTML和CSS,也做过一段时间的项目,使用过CSS和DIV,但是终究没有体会到这两者融会贯通后,所能达到的效果,远远超乎我的想象. 其实很多写过前端页面的人都知道DIV和CSS其实特别简单,但是要想实现需求中的或者自己心中想象的效果,也决非易事.这里面有很多的技巧,如果你不熟悉和精通,那么你做出的页面将会达不到预期的效果,有时候会特别的难看. 首先我们来看一下DIV是啥玩意? DIV是标记语言HTML中众多标签的一个,但是却是文档页面布局使用最频繁的一个标签.它可定义文档中的分

CSS几款超清爽的网页配色代码

原文:CSS几款超清爽的网页配色代码 源代码下载:http://www.zuidaima.com/share/1550463335402496.htm

CSS+JS打造的黑白风格网页计算器

JavaScript版网页计算器,仿Vista风格,计算器中的按钮做的想当漂亮,由此也增加了对此计算器的专业好感.鼠标移在计算器上,有响应效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

模仿yui将css和js打包,加速网页速度

如果你有机会用firebug看看自己网站的网络请求,你会发现请求数量之多超乎你的想象.为减少这个数量,有许多技术方案.比如yui的combo,会将所有需要的js混合成一个文件下载,现代web服务器好像也有这种技术,通过分析网页的链接,将一些文件合并.但这是别人实现的,也许不合你的需求.以下代码是本人在诗篇建站平台上的一个servlet,希望能给你写类似的代码起到一些参考作用. 1.约定格式.这是: http://www.m3958.com/in 的网页源代码的片段,你必须在客户端和服务器端约定格