js實現彈窗效果
阿新 • • 發佈：2020-08-10
本文例項為大家分享了js實現彈窗效果的具體程式碼，供大家參考，具體內容如下
思路：
1.建立一個按鈕，點選彈出彈窗
2.建立一個彈窗頁面 固定定位 預設隱藏
3.將彈窗內容放在彈窗頁面的中間
4.js將事件繫結按鈕，點選後讓彈窗頁面顯示
5.js事件繫結span標籤，點選後讓彈窗頁面消失
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>彈窗</title> <link href="../css/彈窗.css" type="text/css" rel="stylesheet"> </head> <body> <!--開啟彈窗按鈕--> <button id="btn">開啟彈窗</button> <!--彈窗--> <div id="myModal"> <!--彈窗頭部--> <div class="modal"> <div class="modal-header"> <p>危險警告</p> <span class="close">×</span> </div> <!--彈窗文字--> <div class="modal-content"> <p>您將進入一個不安全的頁面</p> </div> <!--彈窗底部--> <div class="modal-footer"> </div> </div> <script src="../js/彈窗.js"> </script> </body> </html>
CSS:
#myModal{
display: none;
position: fixed;
z-index:1;
left:0;
top:0;
width: 100%;
height:100%;
overflow: auto;
background:rgba(0,0.5);
}
#myModal .modal{
width: 500px;
height:300px;
position: relative;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -250px;
animation:animate 1s;
}
.modal .modal-header{
height:50px;
background:white;
color: #000;
line-height:50px;
border-bottom: 1px solid #000000;
}
.modal .modal-header p{
display: inline-block;
margin:0;
position: absolute;
left: 20px;
}
.modal .modal-header .close{
position: absolute;
right:20px;
font-size: 20px;
cursor:pointer;
}
.modal .modal-content{
background: white;
height:200px;
text-align: center;
line-height: 200px;
}
.modal .modal-content p{
margin:0;
}
.modal .modal-footer{
position: relative;
height:50px;
background: white;
}
/*新增動畫*/
@keyframes animate{
from{top:0;opacity:0}
to{top:50%;opacity:1}
}js：
window.onload=function () {
//獲取彈窗按鈕
var btn=document.getElementById("btn");
var close=document.getElementsByClassName("close")[0];
var myModal=document.getElementById("myModal");
//按鈕繫結事件
btn.onclick=function () {
//獲取彈窗
myModal.style.display="block";
}
close.onclick=function () {
myModal.style.display="none";
}
//使用者點選其他地方關閉彈窗
window.onclick=function (event) {
if(event.target ==myModal){
myModal.style.display="none";
}
}
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。