关于 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)功能的更多相关文章

  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. Windows2008下搭建NFS实现windows空间提供linux使用

    我们既然是要把Windows 的硬盘给Linux使用  就需要在Windows上安装NFS网络文件系统 操作如下 1.添加角色-----文件服务---勾选网络文件服务 2.安装完成后 我们需要把这30 ...

  2. 无需server-U IIS7.5 在已有的多个WEB网站上配置FTP发布

    1 新建一个用于ftp登陆的计算机用户. 操作:开始→管理工具→计算机管理→本地用户和组→用户,新建一个计算机用户,设置好用户名和密码,例如:nenkea nkscl 2 在web站点文件夹下,把新建 ...

  3. 在c#中使用mongo-csharp-driver操作mongodb

    1)下载安装 下载地址:http://github.com/mongodb/mongo-csharp-driver/downloads 编译之后得到两个dll MongoDB.Driver.dll:顾 ...

  4. python解析xml模块封装代码

    在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...

  5. uglifyjs压缩JS

    一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基 ...

  6. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  7. 第十八章 数据访问(In .net4.5) 之 I/O操作

    1. 概述 本章内容包括 文件操作.流操作.读写网络数据 以及 异步I/O操作. 2. 主要内容 2.1 文件操作 ① 使用 Drive 和 DriveInfo 访问磁盘信息. DriveInfo[] ...

  8. 命令行工具cmder

    1.下载地址 http://bliker.github.io/cmder/ 分为两个版本:mini版和Full版 2.快捷命令配置: 比如,快速启动canssandra/redis数据库服务和查询工具 ...

  9. iphone/ipad关于size, frame and bounds总结和UIScroll view学习笔记

    1. iphone/ipad大小 Device Screen dimensions(in points) iphone and ipod 320 X 480 ipad 768 X 1024 2. UI ...

  10. uninstall 11.2.0.3.0 grid & database in linux 5.7

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...