Components · Modal
下载

组件

Modal 对话框

对话框遮罩层；需 pivcss.min.js（Tab 焦点陷阱 + Esc 回到触发按钮）。

确认删除

此操作不可撤销，是否继续？

<button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm" data-pvs-modal-open="demo-modal">打开 Modal</button>
<div class="pvs-modal" id="demo-modal">
  <div class="pvs-modal__backdrop">
  </div>
  <div class="pvs-modal__dialog">
    <div class="pvs-modal__header">
      <h3 class="pvs-modal__title">确认删除</h3>
      <button type="button" class="pvs-close" data-pvs-modal-close aria-label="关闭">×</button>
    </div>
    <div class="pvs-modal__body">
      <p class="pvs-m-0">此操作不可撤销，是否继续？</p>
    </div>
    <div class="pvs-modal__footer">
      <button type="button" class="pvs-btn pvs-btn--ghost" data-pvs-modal-close>取消</button>
      <button type="button" class="pvs-btn pvs-btn--danger">删除</button>
    </div>
  </div>
</div>

对话框宽度：pvs-modal--sm / 默认 / --lg。

小号对话框

根元素 pvs-modal--sm

默认宽度

无尺寸修饰符时的标准宽度。

大号对话框

根元素 pvs-modal--lg，适合表单或宽表格。

<div class="pvs-flex pvs-gap-2 pvs-flex-wrap">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-modal-open="demo-modal-sm">小号</button>
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-modal-open="demo-modal-md">默认</button>
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-modal-open="demo-modal-lg">大号</button>
</div>
<div class="pvs-modal pvs-modal--sm" id="demo-modal-sm">
  <div class="pvs-modal__backdrop">
  </div>
  <div class="pvs-modal__dialog">
    <div class="pvs-modal__header">
      <h3 class="pvs-modal__title">小号对话框</h3>
      <button type="button" class="pvs-close" data-pvs-modal-close aria-label="关闭">×</button>
    </div>
    <div class="pvs-modal__body">
      <p class="pvs-m-0 pvs-text-sm">根元素 <code>pvs-modal--sm</code>
      </p>
    </div>
    <div class="pvs-modal__footer">
      <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm" data-pvs-modal-close>关闭</button>
    </div>
  </div>
</div>
<div class="pvs-modal" id="demo-modal-md">
  <div class="pvs-modal__backdrop">
  </div>
  <div class="pvs-modal__dialog">
    <div class="pvs-modal__header">
      <h3 class="pvs-modal__title">默认宽度</h3>
      <button type="button" class="pvs-close" data-pvs-modal-close aria-label="关闭">×</button>
    </div>
    <div class="pvs-modal__body">
      <p class="pvs-m-0">无尺寸修饰符时的标准宽度。</p>
    </div>
    <div class="pvs-modal__footer">
      <button type="button" class="pvs-btn pvs-btn--ghost" data-pvs-modal-close>关闭</button>
    </div>
  </div>
</div>
<div class="pvs-modal pvs-modal--lg" id="demo-modal-lg">
  <div class="pvs-modal__backdrop">
  </div>
  <div class="pvs-modal__dialog">
    <div class="pvs-modal__header">
      <h3 class="pvs-modal__title">大号对话框</h3>
      <button type="button" class="pvs-close" data-pvs-modal-close aria-label="关闭">×</button>
    </div>
    <div class="pvs-modal__body">
      <p class="pvs-m-0">根元素 <code>pvs-modal--lg</code>，适合表单或宽表格。</p>
    </div>
    <div class="pvs-modal__footer">
      <button type="button" class="pvs-btn pvs-btn--ghost" data-pvs-modal-close>关闭</button>
    </div>
  </div>
</div>

pvs-modal--full 全屏；pvs-modal--scroll 仅 body 区滚动。

可滚动正文

pvs-modal--scroll：header/footer 固定，body 溢出滚动。

…

…

…

<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm" data-pvs-modal-open="demo-modal-scroll">长内容 Modal</button>
<div class="pvs-modal pvs-modal--scroll" id="demo-modal-scroll">
  <div class="pvs-modal__backdrop">
  </div>
  <div class="pvs-modal__dialog">
    <div class="pvs-modal__header">
      <h3 class="pvs-modal__title">可滚动正文</h3>
      <button type="button" class="pvs-close" data-pvs-modal-close aria-label="关闭">×</button>
    </div>
    <div class="pvs-modal__body">
      <p class="pvs-m-0">pvs-modal--scroll：header/footer 固定，body 溢出滚动。</p>
      <p class="pvs-mt-4">…</p>
      <p class="pvs-mt-4">…</p>
      <p class="pvs-mt-4">…</p>
    </div>
    <div class="pvs-modal__footer">
      <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm" data-pvs-modal-close>确定</button>
    </div>
  </div>
</div>

div.pvs-modal#id → backdrop + div.pvs-modal__dialog → header / body / footer

类名说明
data-pvs-modal-open值为 modal id
data-pvs-modal-close关闭（按钮或遮罩逻辑由 JS 处理）
类名说明
pvs-modal根（默认隐藏）
pvs-modal__dialog对话框卡片
pvs-modal__header / __title标题区
pvs-modal__body正文
pvs-modal__footer底栏按钮区
pvs-modal--sm / --lg宽度
pvs-modal--full全屏对话框
pvs-modal--scrollbody 区滚动
Tab 陷阱打开后焦点在对话框内循环
Esc关闭并焦点回到 data-pvs-modal-open 按钮
body.pvs-modal-open打开时锁滚动