关于 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. SQL Server :DBLINK创建及使用

    Exec sp_droplinkedsrvlogin bvtwfld12,Null --若存在先刪除Exec sp_dropserver bvtwfld12EXEC sp_addlinkedserve ...

  2. ADO .NET 链接 增删改查

    ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中也可以将数据库中的数据提取到内存中供程序调用 所有数据访问技术的基础 连 ...

  3. c#使用DocX添加多级标题

    博客转移到 http://jacean.github.io/ 继续分享编程经验 先上效果.可以生成多级标题,但是不能生成1,1.1,1.2这样的自动序列, 只是这样的效果. 实现方法是给Paragra ...

  4. windows实用技巧

    电脑如今已经非常普及,不过目前大多数电脑系统都是Win7/Win8.1或者Win10.你真的对自己电脑系统了解吗?今天小编为大家分享13个实用电脑技巧,会这些电脑技巧才叫牛哦! 13个实用电脑技巧 一 ...

  5. win7防火墙打不开(无法启动windows firewall服务)

    点击windows 7控制面板中防火墙的“推荐配置”没有反应:打开“服务”,无法启动windows firewall,并报错.  可能很多的win7用户都碰到过这样的一种情况,那就是win7的防火墙打 ...

  6. mysql存储引擎(mysql学习六)

    存储引擎 现在只有InnoDB支持外键 上接着学习笔记五 class表中有外键,所以不能修改存储引擎 表类型   默认的服务器表类型,通过my.ini可以配置    Default-storage-e ...

  7. 亚信联创--java面试题目总结

    这几天投简历,只有两家的HR表示感兴趣.易思卓越和亚信联创,不管怎样如果能有机会面试都一定尽力表现,所以找了找网上的面经,这里先把题目总结一下. 职位要求如下: ------------------- ...

  8. win7里开始菜单属性里的隐私项无法选择解决方法

    具体问题如下图,其中的隐私项目呈现灰色无法选择: 解决方法如下: win+R 输入gpedit.msc 回车,[用户配置][管理模板][开始菜单和任务栏],在右侧找到[关闭用户跟踪],双击进入设置界面 ...

  9. FireFox Prevent this page from creating addtional dialogs 火狐浏览器 设置 阻止此页面创建更多对话框

    FireFox英文版本老弹出“Prevent this page from creating addtional dialogs”的确认框 FireFox english version alert ...

  10. S5PV2210

    http://www.doc88.com/p-773451739254.html CAN转换器 CAN总线信息转换输出装置 基于车载CAN总线的倒车雷达单元设计[图] http://www.doc88 ...