模态弹窗

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

功能需求

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

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 实现逻辑

$(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 样式建议

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

完整示例代码

loading