HTML、CSS、jQuery を使用してレスポンシブなモーダル ボックスを作成する方法

<!-- 按钮或链接 -->
<button id="modalBtn">打开模态框</button>

<!-- 模态框 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
  </div>
</div>

/* 按钮样式 */
button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

/* 模态框样式 */
.modal {
  display: none; /* 初始隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 高于其他元素 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

/* 模态框内容样式 */
.modal-content {
  background-color: white;
  margin: 10% auto; /* 居中 */
  padding: 20px;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮样式 */
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

$(document).ready(function () {
  // 当点击按钮时显示模态框
  $("#modalBtn").click(function () {
    $("#modal").css("display", "block"); // 显示模态框
  });

  // 当点击关闭按钮或者模态框之外的区域时隐藏模态框
  $(".close, .modal").click(function () {
    $("#modal").css("display", "none"); // 隐藏模态框
  });

  // 防止点击模态框内容区域时隐藏模态框
  $(".modal-content").click(function () {
    return false;
  });
});