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

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

如下面的效果示例：

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

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

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

具体示例代码如下

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

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

  1. Java抓取网页数据（原网页+Javascript返回数据）

    有时候由于种种原因,我们需要采集某个网站的数据,但由于不同网站对数据的显示方式略有不同! 本文就用Java给大家演示如何抓取网站的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数 ...

  2. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  3. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  4. HTML CSS边框阴影的实现

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...

  5. 使用window.print()后，未关闭打印页面，原网页不能操作

    使用window.print()后,未关闭打印页面,原网页不能操作,此时可以试着用window.location.reload()重新加载页面解决问题.

  6. layui在odoo12上的应用，用widget覆盖原字段视图

    layui是一个前端框架,提供了许多前端的组件等,layui的详情自己官网地址:https://www.layui.com/doc/去查看 下面说一下最近用layui遇到的问题和解决方式: 问题:近期 ...

  7. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  8. office 文件在网页中显示

    1.如何在网页上显示word和excel a.可以使用office组件或aspose将word 和excel 转换为pdf 然后在网页上打开pdf,但是效果不是很好 .比如说excel 多个工作薄不是 ...

  9. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

随机推荐

  1. Java 文本I/O 处理

    File类包含获得一个文件/目录的属性,以及对文件/目录进行改名和删除的方法. File类包含许多获取文件属性的方法,以及重命名和删除文件和目录的方法,但是,File类不包含读写文件内容的方法 Fil ...

  2. slf4j的简单用法以及与log4j的区别

    之前在项目中用的日志记录器都是log4j的日志记录器,可是到了新公司发现都是slf4j,于是想着研究一下slf4j的用法. 注意:每次引入Logger的时候注意引入的jar包,因为有Logger的包太 ...

  3. jquery开发自定义的插件总结

    1.第一种方式,有元素的插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. c++动态库封装及调用（3、windows下动态库调用）

    1.DLL的隐式调用 隐式链接采用静态加载的方式,比较简单,需要.h..lib..dll三件套.新建“控制台应用程序”或“空项目”.配置如下: 项目->属性->配置属性->VC++ ...

  5. Python3学习笔记08-tuple

    元组与列表类似,不同之处在于元组的元素不能修改 元组使用小括号,列表使用方括号 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可 tup1 = ('Google', 'Runoob', 19 ...

  6. centos常用网络管理命令

    网卡配置命令:ifconfig (ip addr , ip link) ifconfig:显示所有活动状态的相关信息    ifconfig Interface:仅显示指定接口的相关信息    ifc ...

  7. [学习笔记]Java代码中各种类型变量的内存分配机制

    程序运行时,我们最好对数据保存到什么地方做到心中有数.特别要注意的是内存的分配.有六个地方都可以保存数据: (1) 寄存器 这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而 ...

  8. vue构建项目全过程

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  9. C++ code：向量操作之添加元素

    读入一个文件aaa.txt的数据到向量中,文件中是一些整数(个数未知).要判断向量中的元素有多少个两两相等的数对. 代码如下: #include<iostream> #include< ...

  10. poj2828 伸展树模拟

    用伸展树模拟插队比线段树快乐3倍.. 但是pojT了.别的oj可以过,直接贴代码. 每次更新时,找到第pos个人,splay到根,然后作为新root的左子树即可 #include<iostrea ...