Bootstrap 模态框

Modal 弹窗组件，data-bs-toggle 触发 · 难度：进阶 · +15XP

Bootstrap Modal

模态框是覆盖在页面上的弹窗对话框。Bootstrap 的 Modal 不需要写任何 JavaScript！全部通过 data 属性控制。

基本结构

<button data-bs-toggle="modal" data-bs-target="#myModal">打开</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">...</div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>

data-bs-backdrop="static" 防止点击背景关闭。data-bs-keyboard="false" 禁止 ESC 关闭。