没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript蒙板(model)功能的简单实现代码
0 下载量 174 浏览量
2020-10-21
19:21:55
上传
评论
收藏 40KB PDF 举报
温馨提示
试读
2页
本文给大家介绍JavaScript蒙板(model)功能的简单实现代码,创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住,感兴趣的朋友可以参考下实现代码
资源推荐
资源详情
资源评论
JavaScript蒙板蒙板(model)功能的简单实现代码功能的简单实现代码
本文给大家介绍JavaScript蒙板(model)功能的简单实现代码,创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它
元素盖住,感兴趣的朋友可以参考下实现代码
思路思路:
•创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000; •设置蒙板中内容的背景色和展示格式
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001; •绑定事件, 动态切换蒙板的 display 属性
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}
注意事项: 蒙板要采用绝对定位, 宽和高要占満整个页面, 堆叠顺序要大
源代码源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>蒙板</title>
<style>
.container {
width: 900px;
margin: 50px auto;
text-align: center;
}
#myModel {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000;
}
.model-content {
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001;
}
</style>
</head>
<body>
<div class="container">
<button onclick="showModel()">弹出蒙板</button>
<div id="myModel" onclick="closeModel()">
<div class="model-content">
<p>你好啊,我是内容~~</p>
<p>
<button id="closeModel" onclick="closeModel()">关闭</button>
</p>
</div>
</div>
资源评论
weixin_38640674
- 粉丝: 2
- 资源: 960
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功