js模态对话框使用方法详解

2019-11-19 17:33:06

字体：大中小

来源：转载

供稿：网友

模态框（Modal Dialogue Box）也可叫做模态对话框，或者对话框，当一个模态框被打开时，用户可以与该对话框进行交互，点击关闭按钮可关闭该模态框！

功能实现：

1. 页面上有一个按钮，用于打开模态框，模态框默认隐藏；

2. 用户点击按钮，可打开模态框；用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框

✦ 点击页面其他地方，关闭模态框，可用window.onclick事件

✦ 给关闭按钮绑定点击事件，按钮被点击，模态框Modal添加样式display：none;

✦ 给button按钮绑定点击事件，当按钮被点击时，模态框Modal添加样式display:block;

✦ 先获取页面上的button按钮，关闭按钮，以及模态框Modal

代码实现：

<html> <head>   <style>     /* 弹窗 (background) */     .modal {       display: none; /* 默认隐藏 */       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       overflow: auto;       background-color: rgb(0,0,0);       background-color: rgba(0,0,0,0.4);     }      /* 弹窗内容 */     .modal-content {       position: relative;       background-color: #fefefe;       margin: auto;       padding: 0;       border: 1px solid #888;       width: 35%;       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);       -webkit-animation-name: animatetop;       -webkit-animation-duration: 0.4s;       animation-name: animatetop;       animation-duration: 0.4s     }      /* 添加动画 */     @-webkit-keyframes animatetop {       from {top:-300px; opacity:0}       to {top:0; opacity:1}     }      @keyframes animatetop {       from {top:-300px; opacity:0}       to {top:0; opacity:1}     }      /* 关闭按钮 */     .close {       color: white;       float: right;       font-size: 28px;       font-weight: bold;     }      .close:hover,     .close:focus {       color: #000;       text-decoration: none;       cursor: pointer;     }      .modal-header {       padding: 2px 16px;       background-color: #5587A2;       color: white;     }      .modal-body {padding: 2px 16px;}      .modal-footer {       padding: 2px 16px;       background-color: #5587A2;       text-align: right;       color: white;     }   </style> </head> <body>   <!-- 打开弹窗按钮 -->   <button id="myBtn">打开弹窗</button>    <!-- 弹窗 -->   <div id="myModal" class="modal">      <!-- 弹窗内容 -->     <div class="modal-content">       <div class="modal-header">         <span class="close">×</span>         <h2>弹窗头部</h2>       </div>       <div class="modal-body">         <p>弹窗内容...</p>         <p>弹窗内容...</p>       </div>       <div class="modal-footer">         <h3>弹窗底部</h3>       </div>     </div>    </div>   <script>     // 获取弹窗     var modal = document.getElementById('myModal');      // 打开弹窗的按钮对象     var btn = document.getElementById("myBtn");      // 获取 <span> 元素，用于关闭弹窗 that closes the modal     var span = document.getElementsByClassName("close")[0];      // 点击按钮打开弹窗     btn.onclick = function() {       modal.style.display = "block";     }      // 点击 <span> (x), 关闭弹窗     span.onclick = function() {       modal.style.display = "none";     }      // 在用户点击其他地方时，关闭弹窗     window.onclick = function(event) {       if (event.target == modal) {         modal.style.display = "none";       }     }   </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于Bootstrap 3 JQuery及RegExp的表单验证功能

下一篇：javascript获取以及设置光标位置