关于 js 实现一个简单的蒙板功能(model)

思路:

  • 创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住

  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. display: none;
  6. background-color: rgba(9, 9, 9, 0.63);
  7. width: 100%;
  8. height: 100%;
  9. z-index: 1000;
  • 设置蒙板中内容的背景色和展示格式

  2. width: 50%;
  3. text-align: center;
  4. background: #ffffff;
  5. border-radius: 6px;
  6. margin: 100px auto;
  7. line-height: 30px;
  8. z-index: 10001;
  • 绑定事件, 动态切换蒙板的 display 属性

  2. function showModel() {
  3.     document.getElementById('myModel').style.display = 'block';
  4. }
  5. function closeModel() {
  6.     document.getElementById('myModel').style.display = 'none';
  7. }

注意事项: 蒙板要采用绝对定位, 宽和高要占満整个页面, 堆叠顺序要大

源代码


  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>蒙板</title>
  7.     <style>
  8.         .container {
  9.             width: 900px;
  10.             margin: 50px auto;
  11.             text-align: center;
  12.         }
  14.         #myModel {
  15.             position: absolute;
  16.             top: 0;
  17.             left: 0;
  18.             display: none;
  19.             background-color: rgba(9, 9, 9, 0.63);
  20.             width: 100%;
  21.             height: 100%;
  22.             z-index: 1000;
  23.         }
  25.         .model-content {
  26.             width: 50%;
  27.             text-align: center;
  28.             background: #ffffff;
  29.             border-radius: 6px;
  30.             margin: 100px auto;
  31.             line-height: 30px;
  32.             z-index: 10001;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37. <div class="container">
  38.     <button onclick="showModel()">弹出蒙板</button>
  39.     <div id="myModel" onclick="closeModel()">
  40.         <div class="model-content">
  41.             <p>你好啊,我是内容~~</p>
  42.             <p>
  43.                 <button id="closeModel" onclick="closeModel()">关闭</button>
  44.             </p>
  45.         </div>
  46.     </div>
  47. </div>
  48. <script>
  49.     function showModel() {
  50.         document.getElementById('myModel').style.display = 'block';
  51.     }
  52.     function closeModel() {
  53.         document.getElementById('myModel').style.display = 'none';
  54.     }
  55. </script>
  56. </body>
  57. </html>

利用 js 实现弹出蒙板(model)功能的更多相关文章

  1. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  2. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  3. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

  4. 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题

    如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 如何利用PopupWindow实现弹出菜单并解决焦点获取以及与软键盘冲突问题 在android中有时候可能要实现一个底部弹 ...

  5. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  6. js 实现弹出层效果

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  7. 如何设置secureCRT的鼠标右键为弹出文本操作菜单功能

    secureCRT的鼠标右键功能默认是粘贴的功能,用起来和windows系统的风格不一致, 如果要改为右键为弹出文本操作菜单功能,方便对选择的内容做拷贝编辑操作,可以在 options菜单----&g ...

  8. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  9. JS设置弹出小窗口。

    经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...

随机推荐

  1. C#中使用官方驱动操作MongoDB

    想要在C#中使用MongoDB,首先得要有个MongoDB支持的C#版的驱动.C#版的驱动有很多种,如官方提供的,samus. 实现思路大都类似.这里我们先用官方提供的mongo-csharp-dri ...

  2. 未能加载文件或程序集“Oracle.Web, Version=2.112.1.0, Culture=neutral, PublicKeyToken=89b483f429c47342”或它的某一个依赖项

    当前系统环境描述: Win7x64+VS2012+IIS7 当前情况描述: 发布Web服务,在浏览的时候出现以下问题:未能加载文件或程序集“Oracle.Web, Version=2.112.1.0, ...

  3. 实现QQ机器人报警

    如题,废话不说,直接上代码.首先是登录QQ的小脚本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

  4. js数组的内部实现,迭代器,生成器和内包

    js内部实现 在js以外的很多语言中,数组将会隐式占用一段连续的内存空间.这种隐式的内部实现,使得高效的内存使用及高速的元素方法称为可能,而 在javascript中,数组实体是一个对象,所以通常的实 ...

  5. C++多态性的浅析

    多态性是C++的一个重要特性,[不扯淡直接进入正题] 灵活运用多态,首先得知道类之间的继承.  当B继承了A类后,一般都是公有继承.  B的实例化对象的内存空间结构若是了解 就可以合理利用多态了. A ...

  6. Source not found The JAR file …has no source attachment.

    问题描述如下: 解决方案: 选中你的项目方案,然后鼠标右键选择属性Properties,如下图: 然后依次按下图操作就完成了.

  7. Sql Server数据库之通过SqlBulkCopy快速插入大量数据

    废话不多说,直接上代码 /// <summary> /// 海量数据插入方法 /// </summary> /// <param name="connectio ...

  8. gRPC Client的负载均衡器

    一.gRPC是什么? gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协 ...

  9. 国际制造执行系统(MES)应用与发展

    某些专家认为,当今制造业的生存三要素是信息技术(IT).供应链管理(SCM)和成批制造技术.使用信息技术就是由依赖人工的作业方式转变为作业的快速化.高效化,大量减少人工介入,降低生产经营成本:供应链管 ...

  10. python & pandas链接mysql数据库

    Python&pandas与mysql连接 1.python 与mysql 连接及操作,直接上代码,简单直接高效: import MySQLdb try: conn = MySQLdb.con ...