<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    #pageMask {
      visibility: hidden; //使pageMask元素不可见
      position: absolute; //定位pageMask元素
      left: 0px;          //定位pageMask元素
      top: 0px;           //定位pageMask元素
      width:100%;
      height:100%;
      text-align: center; //文本对其方式
      z-index: 1100;      //指定一个元素的堆叠顺序
      ">#333;//设置背景色
      opacity: 0.6;       //设置元素的透明度级别
    }
    #ModalBody{
      background: white;  //设置背景
      width: 50% !important;
      height: 50% !important;
      position:absolute;  //定位ModalBody元素
      left: 25%;
      top: 25%;
      z-index: 1101;      //指定元素的堆叠顺序
      border: 1px solid;  //边框1px的实线
      display: none;      //不可见
    }
    #closeModalBtn{
      position: static;   //静态定位的元素不会受到top,bottom,left,right影响
      margin-top: 5px;    //设置closeModalBtn元素的上部边距
      margin-right: 1%;   //右部边距
      float: right;       //右侧移动
      font-size: 14px;    //字体大小
      background: #ccc000;
      cursor: pointer;    //设置光标形态，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创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）的更多相关文章

  1. 原生js创建模态框

    1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. 原生js：click和onclick本质的区别（转https://www.cnblogs.com/web1/p/6555662.html）

    原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 原生js登录创建cookie

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

随机推荐

  1. 学习GT一书前九章的体会

    学习Gilbarg和Trudinger一书前九章的体会 本书第二章,调和函数的基本性质进行展示.特别的对比较定理有深刻的阐述以及Perron方法的基本说明,并对Wiener准则作了简要说明. 第三章的 ...

  2. 5、SAMBA服务二：配置实例

    ①:SAMBA服务一:参数详解 ②:SAMBA服务二:配置实例 5.2.3.Samba共享目录配置实例 1.允许匿名用户读取/it共享目录,修改/etc/samba/smb.conf,在最后添加以下内 ...

  3. AI robots CodeForces - 1045G (cdq分治)

    大意: n个机器人, 位置$x_i$, 可以看到$[x_i-r_i,x_i+r_i]$, 智商$q_i$, 求智商差不超过$k$且能互相看到的机器人对数. 这个题挺好的, 关键是要求互相看到这个条件, ...

  4. 『Python CoolBook』C扩展库_其一_用法讲解

    不依靠其他工具,直接使用Python的扩展API来编写一些简单的C扩展模块. 本篇参考PythonCookbook第15节和Python核心编程完成,值得注意的是,Python2.X和Python3. ...

  5. css3的transform-origin配合scale，控制动画，实现各种hover效果

    1.底部画线,从左边开始,右边结束 html: <div class="silde-txt">底部划线</div> css: <style>.s ...

  6. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

  7. arguments.callee弃用与webuploader

    使用最近使用ueditor的时候 谷歌浏览器下上传相同图片两次后第三次上传不了 而且取消了后会出现一个错误的图片.使用的ueditor是1.4.3 后来发现 这个是 webuploader插件的问题. ...

  8. 深入理解之 Android Handler

    深入理解之 Android Handler   一,相关概念 在Android中如果通过用户界面(如button)来来启动线程,然后再线程中的执行代码将状态信息输出到用户界面(如文本框),这时候就会抛 ...

  9. php源码学习——开篇

    这个系列是对php源码的学习记录.由于本人水平有限,可能并不能写的非常清晰和深入,所以,可能只适合本人阅读:) 初次接触php源码,看到陌生的文件夹和大量的文件,可能会觉得茫然无措.php-inter ...

  10. WCF分布式服务1-核心概念

    参考msdn library for WCF Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架. 借助 WCF,可以将数据作为异步消息从 ...