关于 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. 对C语言中va_list，va_start，va_arg和va_end的一点理解

    这几个函数和变量是针对可变参数函数的,什么是可变参数函数呢,最经典的莫过于printf和scanf,这两个函数的声明如下: int printf(const char *format, ...); i ...

  2. Web前端年后跳槽必看的各种面试题

    幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”.年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节.春节以后就开始招人啦,这套题考察的目标就是基础基础再基础, ...

  3. js设计模式（11）---命令模式

    0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...

  4. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  5. c# 加密/解密 哈希

    DES一共就有4个参数参与运作:明文.密文.密钥.向量.其中这4者的关系可以理解为: 密文=明文+密钥+向量: 明文=密文-密钥-向量: 为什么要向量这个参数呢?因为如果有一篇文章,有几个词重复,那么 ...

  6. qemu-kvm简单使用

    qemu-kvm主要有以下几个选项: -snapshot: 创建快照 -m: 指定内存大小 -smp: 指定处理器个数 -cpu: 指定CPU类型 -name: 设置虚拟机名称 -vnc: 使用vnc ...

  7. 选择两个字段时distinct位置的影响

    当选择两个字段时,例如:"select XX1, XX2 from tb; ",那么将distinct放在前一个字段XX1之前和放在后一个字段XX2之前,结果有什么不同呢? 先说结 ...

  8. 第一节 MongoDB介绍及下载与安装

    引言 MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类 ...

  9. php excel (转)

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和 PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把clas ...

  10. 自定义获取html元素对象的7种方法。