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

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

如下面的效果示例：

思路是设置一个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. linux 内核分析工具 Dtrace、SystemTap、火焰图、crash等

    << System语言详解 >> 关于 SystemTap 的书. 我们在分析各种系统异常和故障的时候,通常会用到 pstack(jstack) /pldd/ lsof/ tc ...

  2. 现代C++之理解decltype

     现代C++之理解decltype decltype用于生成变量名或者表达式的类型,其生成的结果有的是显而易见的,可以预测的,容易理解,有些则不容易理解.大多数情况下,与使用模板和auto时进行的类型 ...

  3. openwrt 添加luci选项

    刚刚下载的openwrt trunk版本,安装后没有luci选项,如下图 需要添加luci页面选项. 步骤如下: (1)修改配置文件 .config , 将 CONFIG_FEED_luci is n ...

  4. 转载：2.1 运行中的Nginx进程间的关系《深入理解Nginx》（陶辉）

    原文:https://book.2cto.com/201304/19624.html 在正式提供服务的产品环境下,部署Nginx时都是使用一个master进程来管理多个worker进程,一般情况下,w ...

  5. Windows 2012 安装 Oracle 11g 报错：[INS-13001]环境不满足最低要求。

    问题: 在Windows Server 2012 安装上 Oracle 11g 时,安装程序报错:[INS-13001]环境不满足最低要求. 分析原因: Oracle 在发布 11g时,Winodws ...

  6. keras2.0的一些变化

    keras 变化太快了https://github.com/fchollet/keras/wiki/Keras-2.0-release-notes

  7. Jquery----属性的利用

    属性操作: 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

  8. 多行文字溢出[...]的实现(text-overflow: ellipsis)

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 对于单行文字, 很简单.(详见css3产考手册 进入) css: .oneLine { width: 20 ...

  9. 使用SqlSugar 4.X的T4生成实体类

    <#@ template debug="false" hostspecific="true" language="C#" #> ...

  10. C# int可以表示的最大值

    C#中int由4个字节组成,即由32个二进制数组成,由于最高位是用于表示正负数,所以实际上int所能表示的最大数为231-1=2147483647.