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

<!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>

原文地址：https://www.cnblogs.com/anrangesi/p/9106248.html

时间： 2024-11-10 06:28:26

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

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

使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

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

Python测试开发-创建模态框及保存数据 原创: fin  测试开发社区  前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相应的组件. 1.界面原型 点击添加,弹出模态框, 然后输入 用户:tester, 消息:你好.如下图1所示: ▲图1 再点击保存,那么数据库就存入了以上输入的数据,查看界面的用户列表会显示tester,如下图2所示: ▲图2 2.开发过程 接下

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

HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找到一种将消息传递出去的方式对话......这真的很复杂.对话框元素解决了上述所有问题. 一.Bootstrap模态框和原生模态框的对比 下面是一个bootstrap模态框的html结构: <!-- 按钮触发模态框 --> <button class="btn btn-primary

关于Bootstrap之JS插件模态框的重要注意事项

用modal.js插件的模态框时,根据参考文档写下了如下代码: $('#myModal').modal('toggle').on('shown.bs.modal', function (e) { //TODO something }); 运行结果: chrome正常! IE8+(低版本没试)不响应事件,竟然不响应事件! >>排查步骤: 翻看文档,看有没有介绍此处存在兼容问题,结果没有: 既然不存在兼容问题,就是代码的编写问题了,问题变得好办了,顺序翻转: $('#myModal').on('s

js实现模态框的拖曳功能

项目中需要对模态框进行拖曳,以便对比模态框和页面中的元素,现demo如下: 1 <!-- saved from url=(0066)https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html --> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu

Js实例——模态框弹出层

1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> <head> <title>模态框弹出层.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-

原生js,实现单选框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

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

html,body,div,h1,h2,h3,h4,h5,h6,p,table,form,label,ol,ul,li,dl,dt,dd,img,p{margin:0; padding:0;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color:#333; text-decoration:none;} a,input:focus,div,select{ta

BootStrap学习(6)_模态框

一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootStrap中的 modal.js即可 1.用法: 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或hre