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

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

如下面的效果示例：

思路是设置一个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. MongoDB的增删查改基本操作

    MongoDB的增删查改基本操作 先决条件建库.建集合.建文档 连接mongo,如果连接不上什么连接拒绝,输入mongod命令,启动服务后 输入mongo show dbs 显示当前的所有的数据库 一 ...

  2. sublime3 python 缩进问题

    注意,在sublime中可以选择使用空格还是tap进行缩进, 可以宰这里面进行选择: 如果选择了使用tap符进行缩进,再用空格进行缩进,就会报undinent(没有缩进的错误),也可以这样判断,如果有 ...

  3. BLE获取iphone mac地址的方法--【原创】

    本人用的BLE是TIcc2541,1.3.2协议栈 1.首先要说明的是,iphone手机将信息保护了,BLE设备读到的iphone地址是随机的,每次连接都会不同 2.下面我就具体说明如何查看手机的ma ...

  4. ubuntu cron 及 crontab 自动执行任务

    Add the below line (with tweaks) to the end of /etc/crontab: 30 23 * * * root shutdown -h now At 23: ...

  5. PhantomJSのメモいろいろ

    提供されるモジュール群は5つ phantom: そのもの FileSystem: ファイルに出力したり.依存ファイルの存在確認したり System: コマンドラインから引数取りたいなら WebPage ...

  6. jython获取was5.1的jvm监控参数

    perfName = AdminControl.completeObjectName ('type=Perf,process=server1,node=TSC,cell=TSC,*') perfONa ...

  7. Android APP—— 开发入门教程

    一.SDK下载 下载:adt-bundle-windows-x86_64-20140702.zip(20140702 已经是最后版本了) 解压出来如下: 点击Eclipse安装 创建一个新的工作空间安 ...

  8. PYTHON-基本数据类型-数字类型，字符串类型，列表类型-练习

    # 字符串练习# 写代码,有如下变量,请按照要求实现每个功能 (共6分,每小题各0.5分)# name = " aleX"# # 1) 移除 name 变量对应的值两边的空格,并输 ...

  9. css系列之box-sizing

    转载自:http://zh.learnlayout.com/box-sizing.html 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性.当你设置一 ...

  10. winform(记事本--保存和退出)