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

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

如下面的效果示例：

思路是设置一个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. emmc基础技术8：操作模式2-device identification mode

    1.前言 eMMC总线操作包含: boot mode, device identification mode interrupt mode data transfer mode 本文主要描述devic ...

  2. High level GPU programming in C++

    https://github.com/prem30488/C2CUDATranslator http://www.training.prace-ri.eu/uploads/tx_pracetmo/GP ...

  3. Bootstrap3.0学习第二轮(栅格系统原理)

    详情请查看 http://aehyok.com/Blog/Detail/8.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  4. 【转】void及void指针的深刻解析

    void的含义 void即“无类型” ,void*则为“无类型指针”,可以指向任何数据类型,所以又叫做“通用指针”. void指针使用规范 ①void指针可以只想任意类型的数据,亦即可用任意数据类型的 ...

  5. saltstack自动化运维系列⑥SaltStack实践安装配置HAproxy的Keepalived

    saltstack自动化运维系列⑥SaltStack实践安装配置HAproxy的Keepalived 安装配置Keepalived 1.编写功能模块 #创建keepalived目录# mkdir -p ...

  6. S5PV210 NAND Flash

    NAND Flash 关于NAND FlashS5PV210的NAND Flash控制器有如下特点:1) 支持512byte,2k,4k,8k的页大小2) 通过各种软件模式来进行NAND Flash的 ...

  7. C++ code：数值计算之辛普生（Simpson）法求解积分问题

  8. eclipse 更换主题

    更换系统自带主题 依次点击 window->preferences->General->Appearance->Theme 选择主题 下载eclipse marketplace ...

  9. PHP实现获取文件后缀名的几种常用方法

    方法1: function get_file_type($filename){ $type = substr($filename, strrpos($filename, ".")+ ...

  10. html----常见的标签

    HTML标签: <strike>为文字加上一条中线</strike> <em>: 文字变成斜体.</em> 2<sup>2</sup& ...