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. 给大家分享下坐标转换的代码的JS和Python两个版本的源码【转】

    /** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09).国测局坐标(火星坐标,GCJ02).和WGS84坐标系之间的转换 */ /** * 百度 ...

  2. 学习servlet心得

    1,关于字符编码问题: // resp.setCharacterEncoding("UTF-8");//这个的作用仅仅只是输出字符,不做格式转换成HTML // resp.setC ...

  3. SP从32位系统到64位系统的迁移方法

    前提:目标系统为64位1.在32位系统下正常安装SP,获取SP运行时必须的文件2.将[浪潮集团金融事业部]目录拷贝到目标系统的[C:\Program Files]目录3.进入目标系统的[浪潮集团金融事 ...

  4. 路飞学城知识点4之Django contenttypes 应用

    Django contenttypes 应用 contenttypes 是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中. 每当我们创建 ...

  5. 如何对iPhone进行屏幕录像

    如何对iPhone进行屏幕录像 录制时候的效果: 1. 打开QuickTime Player 2. 在文件中新建影片录制 3. 然后酱紫录制

  6. 获得用户完整的autodiscover配置文件

    outlook 2016 无法自定义配置exchange邮箱,需要使用自动发现来配置,但在配置过程中,经常出现异常的错误,导致无法通过. 之前的文章介绍了通过使用注册表指定autodiscover.x ...

  7. phpstrom设置php环境

    phpstorm设置自动同步服务器 Tools->Deployment->Confinguration 点+号,添加服务器,类型SFTP,输入name 点击ok,项目与服务器连接成功! 设 ...

  8. 沉淀再出发：如何在eclipse中查看java的核心代码

    沉淀再出发:如何在eclipse中查看java的核心代码 一.前言   很多时候我们在eclipse中按F3键打算查看某一个系统类的定义的时候,总是弹出找不到类这样的界面,这里我们把核心对应的代码加进 ...

  9. CentOS使用PXE网络启动自动安装操作系统

    PXE工作原理简介 PXE (Preboot Excution Environment) 预启动执行环境 工作环境介绍: 要实现PXE自动网络安装CentOS至少需要两台主机 1)PXE服务器PXE ...

  10. npm ERR! path: '/usr/local/lib/node_modules/npm/node_modules/cacache/node_modules/ssri' }

    在安装appium 或者升级npm的过程中会遇到这个问题.出错时的代码提示如下: npm ERR! path /usr/local/lib/node_modules/npm/node_modules/ ...