JS 实现固定定位弹窗效果代码教程

本文介绍如何使用 JavaScript 结合 CSS 固定定位实现一个可关闭的弹窗效果。核心思路包括创建触发按钮、设置弹窗为固定定位并默认隐藏、利用 CSS 居中布局内容，以及通过 JS 绑定点击事件控制弹窗的显示与隐藏。示例包含完整的 HTML 结构、CSS 样式及 JS 交互逻辑，支持点击关闭按钮或遮罩层关闭弹窗，并带有简单的入场动画。

实现思路与步骤

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

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

代码实现详解

具体实现代码如下：

HTML 结构


<!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 样式部分：

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 逻辑部分：

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

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

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

JavaScript 弹窗实现概述

实现思路与步骤

代码实现详解

HTML 结构

CSS 样式与布局

JavaScript 交互逻辑

实用工具推荐