JavaScript 实现固定定位弹窗的完整示例

JavaScript 弹窗实现概述

本文分享了一段使用 JavaScript 实现弹窗功能的具体代码，供读者参考学习。

实现思路与步骤

实现该功能的基本思路如下：

1. 创建一个触发按钮，用于点击弹出弹窗。 2. 构建一个弹窗页面，采用固定定位（fixed positioning），并默认设置为隐藏状态。 3. 将弹窗的具体内容在弹窗页面内进行居中布局。 4. 使用 JavaScript 将事件绑定到触发按钮上，点击后使弹窗页面显示。 5. 将事件绑定到关闭按钮（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}
}

JavaScript 逻辑部分：

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";
  }
 }
}

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