关于 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. Linux中与环境变量相关的函数

    1.在终端可以通过env.set命令查看当前的环境变量 2.通过main函数中的第三个参数可以得到当前进程的环境变量列表 int main(int argc , char *argv[] , char ...

  2. SQLServer存储过程入门

    1.创建一个返回结果集的存储过程 create procedure firstpro As begin select * from dbo.Person End 执行: execute dbo.fir ...

  3. 《第一行代码--Android》阅读笔记之广播

    广播接收器 1.注册方式 动态注册:在程序中注册,如在Activity里的onCreate()方法中注册 静态注册:在AndroidManifest.xml中注册   2.可接收哪些广播 接收系统消息 ...

  4. [leetcode]_Pascal's Triangle II

    题目:Pascal三角的变形,要求只用O(K)的额外空间. 思路:由于Pascal三角中,tri[n][i] = tri[n - 1][i] + tri[n-1][i-1],(通常情况下) 如果已经获 ...

  5. java枚举类型使用笔记

    1.values()方法返回枚举所有实例的一个数组,调用这个数组的length方法,可以得到这个枚举对象中实例的个数 2.枚举类的每个实例,其实都是static的,可以通过static方法直接调用,而 ...

  6. Java字符判断

    从键盘上输入一个字符串,遍历该字符串中的每个字符,若该字符为小写字母,则输出“此字符是小写字母”:若为大写字母,则输出“此字符为大写字母”:否则输出“此字符不是字母”. 代码入下: import ja ...

  7. VB 进制转换大全

    '二进制转十进制 Public Function B2D(vBStr As String) As Long Dim vLen As Integer '串长 Dim vDec As Long '结果 D ...

  8. android空鼠修改

    抛弃盒子自带遥控器后,又不满意改键红外遥控器,选择飞鼠及无线键鼠成为最终方案.问题是:菜单键如何实现!其实很简单:即插即用USB无线飞鼠及键鼠套装只涉及2个文件:system/usr/layout/G ...

  9. spring中scope(作用越)理解

    今天总结了一下spring中作用域scope的用法.在spring中作用域通过配置文件形式的用法如下. <bean id="role" class="spring. ...

  10. SQLite数据库与Contentprovider（1）

    SQlite:类似mysql的数据库.把数据保存到.db文件夹中. Contentprovider:一般用于不同进程之间的数据共享(两个APP). 手动建库:http://www.runoob.com ...