1.效果图如下：

2.代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Test</title>

<style>

    #pageMask {

        visibility: hidden;

        position: absolute;

        left: 0px;

        top: 0px;

        width:100%;

        height:100%;

        text-align: center;

        z-index: 1100;

        background-color: #333;

        opacity: 0.6;

    }

    #ModalBody{

        background: white;

        width: 50% !important;

        height: 50% !important;

        position:absolute;

        left: 25%;

        top: 25%;

        z-index: 1101;

        border: 1px solid;

        display: none;

    }

    #closeModalBtn{

        position: static;

        margin-top: 5px;

      margin-right: 1%;

      float: right;

        font-size: 14px;

        background: #ccc0;

        cursor: pointer;

    }

</style>

</head>

<body>

    <div class="content">

        <h1>Test Modal</h1>

        <div id="pageMask"></div>     <!--遮盖层-->

        <button class="showModalBtn" id="showModalBtn">Btn</button>

        <div>    <!--主页面-->

            Page Content...

        </div>

    </div>

    <div id="ModalBody">    <!--模态框-->

        <button id="closeModalBtn" style="display: none;">Close</button>

        <div>Test Modal Body...</div>

    </div>

    <script>

        window.onload = function(){

            expandIframe();

        }

        function expandIframe(){

            var mask = document.getElementById("pageMask");

            var modal = document.getElementById("ModalBody");

            var closeBtn = document.getElementById("closeModalBtn");

                    var btn = document.getElementById("showModalBtn");

            btn.onclick = function(){

                modal.style.display = (modal.style.display == "block")? "none" : "block";

                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";

              mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";

            }

            closeBtn.onclick = function(){

                modal.style.display = (modal.style.display == "block")? "none" : "block";

                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";

                mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";

            }

        }

    </script>

</body>

</html>

原生js创建模态框的更多相关文章

  1. 原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...

  2. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. Python测试开发-创建模态框及保存数据

    Python测试开发-创建模态框及保存数据 原创: fin  测试开发社区  前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎 ...

  4. 教你使用HTML5原生对话框元素，轻松创建模态框组件

    HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...

  5. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  6. js创建弹框（提示框，待确认框）

    ;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...

  7. 原生js 复选框全选案例

    注 : 本文章主要写功能 代码示例 : <body> <input type="checkbox" id="che" /><br& ...

  8. 原生js登录创建cookie

    原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...

  9. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

随机推荐

  1. Postman如何调试

    在用Postman接口测试过程当中,肯定少不了调试,下面记录一下Postman如何通过控制台输出进行调试: 一.打开控制台(View-Show Postman Console) 二.预置测试数据(测试 ...

  2. 转 ： Apache启动报错：could not bind to address [::]:443 解决办法

    转:Apache启动报错:could not bind to address [::]:443 解决办法 安装Apache服务器的时候,报如下错误: Installing the 'apache' s ...

  3. Install guide for OpenLDAP and GOsa 2 on Ubuntu & Debian

    First we will install OpenLDAP by running the command as root: apt-get install slapd ldap-utils ldap ...

  4. 运行第一个MapReduce程序，WordCount

    1.安装Eclipse 安装后如果无法启动重新配置Java路径(如果之前配置了Java) 2.下载安装eclipse的hadoop插件 注意版本对应,放到/uer/lib/eclipse/plugin ...

  5. 绛河 初识WCF5

    然后我们在<Client>中添加一个终结点,这个是客户端的终结点,我们前面曾经提过,通信实际上发生在两个终结点间,客户端也有个终结点,然而请求总是从客户端首先发起,所以终结点地址应该填写为 ...

  6. kernel update

    CentOS/RHEL更新包:https://rhn.redhat.com/errata/RHSA-2017-1382.html yum makecache --更新源 yum update sudo ...

  7. PLSQL Developer V10 注册码

    PLSQL Developer V10 注册码(V10.0.3.1701可以使用)注册时间至:9999/12/31 License Number:999 Product Code:ljkfuhjpcc ...

  8. Asp.Net MVC Identity 2.2.1 使用技巧（七）

    创建角色管理相关视图 1.添加视图 打开RolesAdminController.cs   将鼠标移动到public ActionResult Index()上  右键>添加视图   系统会弹出 ...

  9. [COGS 2064]爬山

    2064. 爬山 ★☆   输入文件:mountain.in   输出文件:mountain.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 球有一天走在街上. 一个健 ...

  10. Google Chrome保存插件方法

    1.拷贝下面地址到记事本 https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D~~~~%26uc ...