利用 js 实现弹出蒙板(model)功能
关于 js 实现一个简单的蒙板功能(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>
</div>
<script>
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}
</script>
</body>
</html>
利用 js 实现弹出蒙板(model)功能的更多相关文章
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
- 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题
如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 在android中有时候可能要实现一个底部弹 ...
- js插件---弹出层sweetalert2（总结）
js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
- js 实现弹出层效果
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- 如何设置secureCRT的鼠标右键为弹出文本操作菜单功能
secureCRT的鼠标右键功能默认是粘贴的功能,用起来和windows系统的风格不一致, 如果要改为右键为弹出文本操作菜单功能,方便对选择的内容做拷贝编辑操作,可以在 options菜单----&g ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- JS设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
随机推荐
- iOS 技术博客分享
1.了解有什么新技术 1> 苹果API文档 - General - Guides - iOSx API Diffs 2> 观看WWDC会议视频 2.如何使用新技术 1> 自己根据AP ...
- 观察者（observer）设计模式
转载:http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx 假设我们有个高档的热水器,我们给它 ...
- 错记-checkbox radio
很多时候我想会用到浏览器默认的单选按钮或者复选框,比如说偷懒的时候或者心情不好的时候╮(╯﹏╰)╭, 在html结构里我想实现点击文字旁边的单选按钮就跟着选中或反之,像这样:
- jquery之val()和attr("value")
1.attr("value")=原来的默认值 ,而val()=用户改变的值.
- 各种数据处理方案（SQL，NoSQL，其他）的应用场景
综合stackoverflow和linkin上的相关讨论,还有我个人的工作经验: Redis应用场景(大部分场景下memcache可以用Redis代替,所以不单独讨论) 线上业务,读写的高性能要求 ...
- yii2解析非x-www-form-urlencoded类型的请求数据（json,xml）
组件配置添加: 'request' => [ 'parsers' => [ 'application/json' => 'yii\web\JsonParser', 'applicat ...
- [Linux]Nginx + Node.js + PM2 + MongoDb + (Memcached) Part I
运行环境: 在本地的VirtualBox下运行的Ubuntu 14.04 LTS 0. 查看一下Server的IP地址 ifconfig 我的Server IP是192.168.0.108 1. 安 ...
- Java求和
用while结构求0~100的整数数字之和. 代码如下: public class WhileDemo { public static void main(String[] args) { int l ...
- Wordpress模板标签大全
Wordpress模板基本文件 style.css 样式表文件 index.php 主页文件 single.php 日志单页文件 page.php 页面文件 archvie.php 分类和日期存档页文 ...
- Redux介绍及基本应用
一.Redux介绍 Redux的设计思想很简单,就两句话: Web应用是一个状态机,神力与状态是一一对应的 所有的状态,保存在一个对象里面 二.Redux基本概念和API Store Store就是 ...