js實現(xiàn)彈窗效果

更新時間：2020年08月09日 13:39:25 作者：星辰落海

這篇文章主要為大家詳細介紹了js實現(xiàn)彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)彈窗效果的具體代碼，供大家參考，具體內容如下

思路：

1.創(chuàng)建一個按鈕，點擊彈出彈窗
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">&times;</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";
  }
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: