关于 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. ref和out的区别，值类型和引用类型的使用

    今天刚刚明白ref和out的区别,只限于个人理解如有不同请赐教,谢谢 首先我感觉ref和out是针对于值类型来说,以前一直认为是针对于引用类型看下面的一段代码 1.首先结果 i=0:ints[0]=0 ...

  2. Change Homepage Logo

     Open the following defination and changed them. 1. NEW_PS_LOGO (Image Type) - To change the logo.2. ...

  3. js一些稀奇古怪的写法-带你装逼带你飞

    //定时器的第三个参数 setInterval(function(str1,str2,num){ alert(str1+str2+num) },1000,'参数1','还可以有很多参数,不同的类型.. ...

  4. spark-submit工具参数说明

    执行时需要传入的参数说明 Usage: spark-submit [options] <app jar | python file> [app options] 参数名称 含义 --mas ...

  5. php敏感词过滤

    在项目开发中发现有个同事在做敏感词过滤的时候用循环在判断,其实是不用这样做的,用php的数组函数和字符串函数即可实现 function filterNGWords($string) { $badwor ...

  6. ThinkPHP实现联动菜单；

    联动菜单,首先给你看看前端是怎么写的:

  7. 【PHP】配置环境变量

    使用Zend Framework的zf.bat创建项目时,出现如下提示:"php.exe"不是内部或外部命令,也不是可运行的程序或批处理文件. 解决方法: 配置php的环境变量: ...

  8. mysql 截取字符

    $where="(left(`type_id`,1)=1"; 返回 type_id 字段 从左边开始长度为1个字符 LEFT(str,len)返回字符串str的最左面len个字符. ...

  9. VLC 重新编译第三方库的预编译包contrib

    VLC的引用了很多开源的第三方库,均放到VLC目录下的contrib中(本来开始编译是2.1.x以上版本,以前或以后可能会变化),在Windows版本编译中,contrib文件夹中仅仅下载VLC官网上 ...

  10. MapReduce shuffle阶段详解

    在Mapreduce中,Shuffle过程是Mapreduce的核心,它分布在Mapreduce的map阶段和reduce阶段,共可分为6个详细的阶段: 1).Collect阶段:将MapTask的结 ...