选小程序流程模版_js模态对话框使用方法详解

2021-01-12 14:03 admin
js模态对话框使用方法详解       这篇文章主要为大家详细介绍了js模态对话框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

模态框(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" 
 !-- 弹窗内容 -- 
 div 
 div 
 span × /span 
 h2 弹窗头部 /h2 
 /div 
 div 
 p 弹窗内容... /p 
 p 弹窗内容... /p 
 /div 
 div 
 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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。