在弹窗中新建一个遮罩层

一、mask-div

在原来页面弹出一个弹窗后,鼠标还是可以点击页面其他地方,所以我要给页面弹出一个遮罩层,把页面所有东西都遮住,不给用户点击除了弹窗之外的东西。

实现后的效果:

当我点击“添加”按钮时,会弹出两个层,一个是下面的遮罩层(一个我们看到的黑色半透明的遮住全屏幕的div),另一个就是我们要填写信息的弹窗。

二、设置遮罩层样式 

要实现遮住全屏,可以这样来设置属性,兼容FF、chrome

#mask-div{background-color:black; position:fixed; left:0; top:0;z-index: 100; display:none; width:100%; height:100%;opacity:.0.6;filter: alpha(opacity=60);-moz-opacity: 0.6;}

(1)设置为positon:fixed,然后width和height都设置为100%,这样就能遮住整个屏幕。

(2)mask-div的层比弹窗低。z-index

时间: 2024-08-06 07:58:41

在弹窗中新建一个遮罩层的相关文章

CSS创建一个遮罩层

.layer{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -moz-opacity: 0; filter: alpha(opacity=50); z-index: 99; height: 100%; margin:0 auto; } 创建一个遮罩层. CSS创建一个遮罩层

Umbraco -- 在Visual Studio中新建一个View 如何在Umbraco back office 中显示出来

在使用Umbraco中的过程中,遇到一个问题. 我在项目中(Visual Studio),添加了一个View---Test.cshtml. 然后进入到该Umbraco项目的back office, 在back office 的 Templates中,刷新之后,并没有发现这个view(Template). 为什么呢? 因为Umbraco back office 中的Template,是有一些相关的信息保存在数据库中的, 加载时,会根据数据表中的相关信息来加载这个Umbraco back offic

怎么在CAD编辑器中新建一个线型

怎么在CAD编辑器中新建一个线型?在我们日常的编辑CAD图纸的工作中,我们会使用到许多的技巧,要在CAD编辑器中回转出不同的图形才能编辑出一张完整的CAD图纸,一张图纸中是由许多的内容进行组成起来的,所以在有的地方需要进行标注,但是标注的线型也是要符合图纸的内容,那在CAD中没有时候适合的线型,怎么在CAD编辑器中新建一个线型?具体要怎么来进行操作.下面我们就一起来看看吧. 第一步:首先打开自己常用的电脑,如果电脑桌面中没有CAD编辑器的,可以在电脑桌面中任意的打开一个浏览器,然后在浏览器的搜索

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

在eclipse中新建一个maven项目

点击Next,进入下一个 在此窗口下填写group id,artifact id,可以随便写一个,在Packaging中选择war类型 点击下一步,在以下步骤中一直next,直到最后点击finish

根据juery CSS点击一个标签弹出一个遮罩层的简单示例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/JavaScript/jq

web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

https://blog.csdn.net/zgsdzczh/article/details/79744838 <style type="text/css">   * {   margin: 0;   padding: 0;   }     a {   text-decoration: none;   }     img {   max-width: 100%;   height: auto;   }     .weixin-tip {   display: none;  

页面用一个遮罩层显示加载,加载完后隐藏该div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "><img src="/content/5-12120419410

微信小程序中的小小的遮罩层

<view class='pop_wx_er'> <view>ddddddddddddd</view> <view>ddddddddddddd</view> <view>ddddddddddddd</view> <view>ddddddddddddd</view> <view>ddddddddddddd</view> <view>ddddddddddddd<