js模态对话框使用方法详解
模态框（Modal DialogueBox）也可叫做模态对话框，或者对话框，当一个模态框被打开时，用户可以与该对话框进行交互，点击关闭按钮可关闭该模态框！
功能实现：
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:1pxsolid#888;
width:35%;
box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
-webkit-animation-name:animatetop;
-webkit-animation-duration:0.4s;
animation-name:animatetop;
animation-duration:0.4s
}
/*添加动画*/
@-webkit-keyframesanimatetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframesanimatetop{
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:2px16px;
background-color:#5587A2;
color:white;
}
.modal-body{padding:2px16px;}
.modal-footer{
padding:2px16px;
background-color:#5587A2;
text-align:right;
color:white;
}
</style>
</head>
<body>
<!--打开弹窗按钮-->
<buttonid="myBtn">打开弹窗</button>
<!--弹窗-->
<divid="myModal"class="modal">
<!--弹窗内容-->
<divclass="modal-content">
<divclass="modal-header">
<spanclass="close">×</span>
<h2>弹窗头部</h2>
</div>
<divclass="modal-body">
<p>弹窗内容...</p>
<p>弹窗内容...</p>
</div>
<divclass="modal-footer">
<h3>弹窗底部</h3>
</div>
</div>
</div>
<script>
//获取弹窗
varmodal=document.getElementById('myModal');
//打开弹窗的按钮对象
varbtn=document.getElementById("myBtn");
//获取<span>元素，用于关闭弹窗thatclosesthemodal
varspan=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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。