利用 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设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
随机推荐
- jquery.qrcode.js生成二维码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CentOS6 更改Mysql数据库的数据存放位置
mysql使用yum安装时,默认的数据是存储在/var/lib/mysql下.一般情况下,为了数据的安全性,建议将mysql数据库的数据文件存储在系统的第二块磁盘上的目录下可以按照以下步骤进行操作: ...
- HTML表单的问题
1. 表单一定要放在<form>标签里面,就会有错误. 像<textarea>单独放的时候,单击的时候不会出现在开始位置,而是在任意单击的地方开始.
- PHP中数据库的连接
<?php //1.链接MySQL服务器 $conn = mysql_connect("localhost", "root" , 199452); //2 ...
- Application Designer Security
This wiki page covers how to manage and restrict Application Designer security through permission li ...
- qemu-kvm简单使用
qemu-kvm主要有以下几个选项: -snapshot: 创建快照 -m: 指定内存大小 -smp: 指定处理器个数 -cpu: 指定CPU类型 -name: 设置虚拟机名称 -vnc: 使用vnc ...
- 编写高质量代码改善C#程序的157个建议
1.使用StringBuilder或者使用string.Format("{0}{1}{2}{3}", a, b, c, d)拼接字符串. 2.使用默认转型方法,比如使用类型内置的P ...
- Java 第三天 Gradle和其它
Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具. 下载地址 http://www.gradle.org/downloads 环境变量 ...
- Oracle 11gR2 RAC修改SCAN IP
一.查看当前环境: # grid用户 检查scan-ip地址的配置 [grid@node1 ~]$ srvctl config scan SCAN name: scan-cluster.com, Ne ...
- Media Player（APP）
今天共享一下,以前做的影音播放器.比较简单.适合新手. 我上传了附件可以参考一下. PDF:http://files.cnblogs.com/files/hongguang-kim/MediaPlay ...