利用 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设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
随机推荐
- minicom/kermit捕捉日志
1.minicom捕捉日志 ctrl-A Z 命令窗口中有 Capture on/off......L 2.kermit捕捉日志 ctrl-\ C进入kermit命令行模式 log session ...
- PHP用Array模拟枚举
C#中枚举Enum的写法: /// <summary> /// 公开类型 2-好友可见 1-公开 0-不公开 /// </summary> public enum OpenSt ...
- jQuery控制TR的显示隐藏
网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td ...
- [leetcode]_Unique Paths
题目:有一个m * n 的方格,如下图,一个小robot希望从左上角走到右下角,共有多少种不同的路线走法. 思路: 我的错误思路:全排列,从(0,0)走到(m - 1,n - 1)共需要往下走m-1步 ...
- 神奇的fastcgi_finish_request
当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...
- 清空FORM表单的几种方式 Reset 重加载
1. form中定义name <form name = "sbform" action="sb_add.php" method="post&qu ...
- PHP请求页面
< ?php $file_contents = file_get_contents('http://www.ccvita.com/'); echo $file_contents; ?> 有 ...
- pure css做的pc登陆界面
源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- [php]如何更改wamp默认的mysq空密码？
最近刚开始学php,爬坑中.上午看了会儿书,下了个源码,把文件部署到www下之后,也导入了sql文件,但是进入之后显示 = = 一开始不知道是什么.后来百度之后发现是mysql的问题,应该是源码中p ...
- SQL Server 一些关键字详解(二)
1.LEFT JOIN 容易让人误解的地方 背景:因为在网上搜了下 LEFT JOIN 和 OUTER APPLY 的区别,时发现,有的网友解释为: 1) A left join B 的连接 ...