溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js實現彈窗效果的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
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,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";
}
}
}以上是js實現彈窗效果的方法是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
