HTML 弹出遮罩层二（遮罩层和内容标签分开）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../files/js/jquery-3.3.1.min.js"></script>
<style>
.box {
position: relation;
display: none;
}
//遮罩层样式
.modal_cover {
width: %;
height: %;
position: fixed;
top: ;
left: ;
background-color: rgba(, , , .);
}
//并排内容样式
.modal {
position: absolute;
width: 823px;
background: salmon;
z-index: ;
height: 400px;
/* 水平垂直居中 */
left: %;
top: %;
transform: translate(-%, -%);
}
.content {
width: %;
height: 600px;
/* 超出高度右侧出现垂直滚动条 */
overflow: auto;
overflow-x: hidden;
cursor: pointer
}
</style>
</head> <body>
<button class="surprise" onclick="">点击我会有惊喜呦！！！！</button>
<div class="box">
<!-- 遮罩层 -->
<div class="modal_cover"></div>
<div class="modal">
<div class="content">提交申诉</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".surprise").click(function () {
$(".box").css("display", "block");
})
// 点击遮罩层区域 蒙版层消失
$(".modal_cover").click(function () {
$(this).parent(".box").css("display", "none");
})
})
</script> </html>
HTML 弹出遮罩层二（遮罩层和内容标签分开）的更多相关文章
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- iOS 仿看了吗应用、指南针测网速等常用工具、自定义弹出视图框架、图片裁剪、内容扩展等源码
iOS精选源码 扩展内容的cell - folding-cell 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... JPImageresizerView 仿微信的图片裁剪 带年月和至今以 ...
- 【转】弹出可拖动的DIV层提示窗口
来源:www.divcss5.com <html> <head> <meta http-equiv="Content-Type" content=&q ...
- jquery实现弹出即消失的提示层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- layer弹出层不居中解决方案，仅显示遮罩，没有弹窗
问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...
- layer弹出层不居中解决方案（转）
@感谢参考文章 原文内容: 一.问题描述 用layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了. 还有一种 ...
- layui弹出层基础参数
一.type-层类型 类型:Number 默认为0(信息框); 1(页面层),可以在页面添加HTML内容 2(iframe层) 3(加载层)加载时显示的弹出框 4(tips层) 需要绑定ID就不展示 ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【做题】CFedu41G. Partitions——推式子
实际上这题的题面还是颇有意思,对两个划分不同的定义暗示了第二类斯特林数,模数是\(1000000007\)又表明这题不是NTT. 那么一开始的想法是考虑每个集合的贡献.设这个集合为\(S\),那么它的 ...
- oracle 之 基础操作
//删除存在的表空间及数据 drop tablespace TS_YYGL including contents and datafiles 若是出现了提示 错误 导致无法全部删除,那么就执行以下语句 ...
- P2473 [SCOI2008]奖励关
思路 n<=15,所以状压 因为求期望,所以采用逆推的思路,设\(f[i][S]\)表示1~i的宝物获得情况是S,i+1~k的期望 状态转移是当k可以取时,\(f[i][S]+=max(f[i+ ...
- MPU6050可以读取ID值，温度值和原始数据值为零问题解决
MPU6050可以读取ID值是0x68,但是读取到的原始数据为零(下面虚拟示波器图中温度值是36.529是单位转换公式中的值被打印出来了,实际值也是零).经论坛搜寻,发现MPU6050出现问题的原因有 ...
- Unity3D学习笔记（三十二）：Xlua（2）
Xlua支持通过子类对象访问父类的变量属性和方法 对于C#的ref,out参数的方法 当调用的时候:out类型的参数是不需要传递实参的,普通的参数和ref参数需要传递实参. out,ref传出值通 ...
- SQL语句执行的顺序机制
From Where Group by Having Select 表达式 Distinct ORDER BY TOP/OFFSET-FETCH
- 最大匹配字符串LCS,The Longest Common Substring
public enum BackTracking { UP, LEFT, NEITHER, UP_AND_LEFT } public abstract class LCSBaseMatch { /// ...
- js 字符串加密解密
Welcome to jzzy.com
- C#题目及答案（2）
1. NET和C#有什么区别 答:.NET一般指 .NET FrameWork框架,它是一种平台,一种技术. C#是一种编程语言,可以基于.NET平台的应用. 2．一列数的规则如下: 1.1.2.3. ...
- 更新：在MAC上安装RN开发环境的步骤（全）
总共分为三部: 1:按照官网(中文)上的步骤去安装jdk和android studio 2:配置SDK 3:安装虚拟机和模拟器 所以这里提出的是注意事项: 1:~/.bash_profile 文件里面 ...