<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="background-color: #00A770;height: 5000px">123</div>

<div style="background-color: black;z-index: 9;position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

opacity: 0.5;

"></div>

<div style="background-color: white;height: 200px;width:400px;z-index: 10;

position: fixed;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px">

    <input type="text">

    <input type="text">

</div>

</body>

</html>

注意：opacity 设置透明度0.5

　　z-index    层级顺序　　

效果如下图

css分层,实现遮罩底层弹出新窗口里可以操作，最下层能看到单不能操作的更多相关文章

  1. chrome偶尔弹出新窗口的解决方案

    最近使用谷歌浏览器,在搜索页点击搜索结果时,偶尔会弹出新窗口,而不是新标签,试验发现,只要将chrome里面安装的google drive app卸载就行了. 当然了,如果此方法不适合你的情况,还可以 ...

  2. js弹出新窗口居中

    方式1: <script language="javascript"> var newUrl = <%=newUrl % > //window.locati ...

  3. 【WPF】监听WPF的WebBrowser控件弹出新窗口的事件

    原文:[WPF]监听WPF的WebBrowser控件弹出新窗口的事件 WPF中自带一个WebBrowser控件,当我们使用它打开一个网页,例如百度,然后点击它其中的链接时,如果这个链接是会弹出一个新窗 ...

  4. 点击grid单元格弹出新窗口

    实现功能:点击指定单元格后会弹出新窗口,并且最后一行合计不会触发单元格触发函数 <script type="text/javascript"> grid.on('cel ...

  5. 解决以showModalDialog打开的页面在提交表单时弹出新窗口的问题

    源代码如下: 父页面: window.showModalDialog("../readfile/readFile.jsp","","dialogWid ...

  6. jsp弹出新窗口代码

    1.最基本的弹出窗口代码其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open (page.html) ...

  7. js如何弹出新窗口

    js如何弹出新窗口 时间:2012-4-22 弹出新窗口也是在网页设计中会经常用到的,其用法也很简单,是通过调用javascript的内置函数windows.open来产生的.  window.ope ...

  8. window.open浏览器弹出新窗口被拦截—原因分析和解决方案

    最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,在本机实验没问题,到了服务器就被拦截了,火狐有拦截提示,360浏览器拦截提示都没有,虽然在自己的环境可以对页面进行放行,但是对用户 ...

  9. flex 在父窗口监听弹出窗口里的某个按钮被点击

    flex 在父窗口监听弹出窗口里的某个按钮被点击 这样可以从子窗口拿回数据在父窗口处理数据,不必再子窗口中处理.在某些情形下省去了不少麻烦. /** * 右键菜单项单击事件 * changed by ...

随机推荐

  1. OpenCV3的配置(VS2015)

    1:首先下载和解压到给定的目录 2:设置环境变量...\build\x64\vc14\bin 3:打开VS,新建一个项目,再添加一个代码,刚开始当然是报错的 #include<opencv2\o ...

  2. <select> js中 设置选重

    function ChangeSelect(n)      {          var selectnum=n;        var kk = document.getElementById(&q ...

  3. SpringBoot | 第二十五章：日志管理之自定义Appender

    前言 前面两章节我们介绍了一些日志框架的常见配置及使用实践.一般上,在开发过程中,像log4j2.logback日志框架都提供了很多Appender,基本上可以满足大部分的业务需求了.但在一些特殊需求 ...

  4. [Coding Style] CSS coding style

    CSS coding style Note 结合实际工作中的规范和推荐大家使用的CSS书写规范.顺序这篇文章整合而成 Navigation CSS 书写顺序 CSS 常用文件命名 CSS 常用命名规范 ...

  5. 《大话设计模式》num02---策略模式

    2018年01月22日 22:04:57 独行侠的守望 阅读数:72更多个人分类: 设计模式编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://blog.csdn.net/xiao ...

  6. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  7. windows无法连接到打印机 操作失败,错误为0x00000002 解决方案

    平时使用局域网打印机没有问题,今天突然脱机了,错误号为0x00000002 服务器上打印机一切正常,别人使用也一切正常. 最后,重启了Spooler服务后搞定. 重新链接打印机,搞定!

  8. 有些其他程序设置为从 Outlook 下载并删除邮件。为防止发生此意外情况，我们将这些邮件放入一个特殊的 POP 文件夹中

    最近使用FOXMAIL接收MSN邮件时,发现有一些邮件收取不到,进到WEB页面,页面下方提示“你的邮件位于 POP 文件夹中!有些其他程序设置为从 Outlook 下载并删除邮件.为防止发生此意外情况 ...

  9. cms-框架搭建

    1.web.xml中的配置,在配置中主要有: 1.1.过滤器: 1.1.1:shiro权限过滤器 1.1.2:字符编码过滤器 1.2.监听器: 1.2.1:spring监听器 1.3.servlet ...

  10. linux 命令——39 grep (转）

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...