博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在弹窗中新建一个遮罩层
阅读量:5116 次
发布时间:2019-06-13

本文共 508 字,大约阅读时间需要 1 分钟。

一、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

 

转载于:https://www.cnblogs.com/wuyinghong/p/4322686.html

你可能感兴趣的文章
css排版
查看>>
【codevs1170】 双栈排序
查看>>
以Flappy Bird破解为例介绍andriod apk加壳方法
查看>>
我发现我对人类活动的认识开始有一点点变化了
查看>>
arcgis server缓存路径修改
查看>>
Swing学习笔记1-----Swing组件类的层次
查看>>
现代软件工程 第3-6章 作业
查看>>
JQuery获取当前屏幕的高度宽度
查看>>
game with probability problem
查看>>
mininet的安装
查看>>
[asp.netMVC]通过configSource提高web.config配置灵活性
查看>>
线程同步的几种方法
查看>>
Android:读取assets目录下文件(二)
查看>>
Android 屏幕适配
查看>>
jQuery1.9.1源码分析--Deferred对象和Promise对象
查看>>
css
查看>>
写一个function,清除字符串前后的空格。(兼容所有浏览器)
查看>>
Oracle 存储过程发送邮件
查看>>
面向对象
查看>>
Leetcode 24——Swap Nodes in Pairs
查看>>