菜鸟教程
教程 jquery tutorial

模态弹窗

模态弹窗（Modal）是一种常见的用户交互方式，常用于确认提示、登录注册、表单输入等场景。使用 jQuery 可以快速实现动态显示、关闭、动画过渡等功能。

功能需求

  • 点击按钮打开弹窗
  • 显示遮罩层并禁用页面滚动
  • 点击关闭按钮或遮罩区域关闭弹窗
  • 可扩展支持嵌套表单、动态内容加载等

HTML 结构示例

html 
<button id="openModal">打开弹窗</button>

<div class="modal-mask"></div>
<div class="modal-box">
  <div class="modal-header">
    <span class="title">提示</span>
    <span class="close-btn">&times;</span>
  </div>
  <div class="modal-content">
    <p>这是一个 jQuery 实现的模态弹窗。</p>
  </div>
</div>

jQuery 实现逻辑

js 
$(function () {
  $("#openModal").click(function () {
    $(".modal-mask, .modal-box").fadeIn();
    $("body").css("overflow", "hidden");
  });

  $(".close-btn, .modal-mask").click(function () {
    $(".modal-mask, .modal-box").fadeOut();
    $("body").css("overflow", "auto");
  });
});

CSS 样式建议

css 
.modal-mask {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.modal-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 100;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.modal-header {
  padding: 10px;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-content {
  padding: 20px;
  color: #333;
}
.close-btn {
  cursor: pointer;
  font-size: 20px;
}

完整示例代码

在线代码演示
源码 
<style>
  body {
    height: 150px;
  }

.modal-mask {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}


.modal-box {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 300px;
background: #fff;
transform: translate(-50%, -50%);
z-index: 100;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


.modal-header {
padding: 10px;
background-color: #007bff;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}


.modal-content {
padding: 20px;
color: #333;
}


.close-btn {
cursor: pointer;
font-size: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;


<body>
<button id="openModal">打开弹窗</button>


<div class="modal-mask"></div>
<div class="modal-box">
<div class="modal-header">
<span class="title">提示</span>
<span class="close-btn">&times;</span>
</div>
<div class="modal-content">
<p>这是一个 jQuery 实现的模态弹窗。</p>
</div>
</div>


<script>
$(function () {
$("#openModal").click(function () {
$(".modal-mask, .modal-box").fadeIn();
$("body").css("overflow", "hidden");
});


  $(&quot;.close-btn, .modal-mask&quot;).click(function () {
    $(&quot;.modal-mask, .modal-box&quot;).fadeOut();
    $(&quot;body&quot;).css(&quot;overflow&quot;, &quot;auto&quot;);
  });
});



</script>
</body>

相关内容