Skip to main content
Frutjam logoFrutjam
v2.2.6
Theme

模态组件

最后更新:

CSS-only Tailwind CSS modal使用原生 <dialog> 元素。响应大小、背景和焦点陷阱。没有用于基本用途的JavaScript。WCAG AA可访问，适用于Django、HTMX、Laravel、React和任何堆栈。

模态组件在聚焦的叠加窗口中显示重要信息或请求用户操作。基于语义HTML对话框元素，模态支持动画、可自定义的定位和背景叠加。Frutjam模式系统通过键盘导航和陷阱对焦完全可访问，使其成为确认、表单和提醒对话的理想选择。

仅限CSS ，无需JavaScript。WCAG AA可访问且框架不可知—适用于Django、HTMX、Laravel、React和任何堆栈。

纲类型描述
modal军团据点全屏对话框覆盖容器
modal-contentModifier修正者带填充和背景的内部面板
modal-backdropModifier修正者点击关闭背景叠加
modal-topModifier修正者将内容与屏幕顶部对齐
modal-bottomModifier修正者将内容与屏幕底部对齐
modal-startModifier修正者将内容向左对齐
modal-endModifier修正者将内容向右对齐
modal-centerModifier修正者水平居中
modal-middleModifier修正者垂直居中
modal-slide-up风格滑动入口动画
modal-slide-down风格滑下入口动画
modal-slide-start风格从左侧动画滑入
modal-slide-end风格从右侧动画滑入

基本用法

将唯一ID添加到 <dialog id="myModal"> HTML元素，然后使用JavaScript中的该ID调用 myModal.showModal() 打开模态框， myModal.close() 关闭此弹窗

Dialog modal

Press Esc key or close button to close the modal

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<dialog class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down" id="toggleModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="toggleModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or close button to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="toggleModal.close()">Close Modal via Backdrop</button>
</dialog>
<button type="button" class="btn btn-xs" onclick="toggleModal.showModal()">Show Modal</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { useModal } from 'frutjam/react'

export default function ModalDemo() {
  const modal = useModal()
  return (
    <>
      <button type="button" className="btn btn-xs" onClick={modal.open}>Show Modal</button>
      <dialog ref={modal.ref} className="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
        <div className="modal-content">
          <div className="flex justify-between items-center gap-3">
            <div className="font-medium heading-lg">Dialog modal</div>
            <button type="button" className="btn btn-xs btn-square btn-rounded btn-ghost" onClick={modal.close}>
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 6 6 18"></path>
                <path d="m6 6 12 12"></path>
              </svg>
            </button>
          </div>
          <div className="divider my-3"></div>
          <p className="para">Press Esc key or close button to close the modal</p>
        </div>
        <button type="button" className="modal-backdrop" onClick={modal.close}>Close Modal via Backdrop</button>
      </dialog>
    </>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup>
import { ref } from 'vue'
const dialogRef = ref(null)
</script>

<template>
  <button type="button" class="btn btn-xs" @click="dialogRef.showModal()">Show Modal</button>
  <dialog ref="dialogRef" class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
    <div class="modal-content">
      <div class="flex justify-between items-center gap-3">
        <div class="font-medium heading-lg">Dialog modal</div>
        <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" @click="dialogRef.close()">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="divider my-3"></div>
      <p class="para">Press Esc key or close button to close the modal</p>
    </div>
    <button type="button" class="modal-backdrop" @click="dialogRef.close()">Close Modal via Backdrop</button>
  </dialog>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  let dialog = $state(null)
</script>

<button type="button" class="btn btn-xs" onclick={() => dialog.showModal()}>Show Modal</button>
<dialog bind:this={dialog} class="modal modal-center lg:modal-middle modal-slide-end lg:modal-slide-down">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick={() => dialog.close()}>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or close button to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick={() => dialog.close()}>Close Modal via Backdrop</button>
</dialog>

单击外部时关闭模态框

The .modal-backdrop 提供可单击的背景，当在模式内容之外单击时关闭模式。

Dialog modal

Press Esc key or click outside to close the modal
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal" id="backdropModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Dialog modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Press Esc key or click outside to close the modal</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="backdropModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="backdropModal.showModal()">Show Modal</button>

模态幻灯片动画

使用以下定向效用类从顶部、底部、开始（ LTR中向左， RTL中向右）或结束（ LTR中向右， RTL中向左）平滑地滑入和滑出： modal-slide-top, modal-slide-bottom, modal-slide-start和 modal-slide-end 在模态组件中。这些动画通过使用基于模态位置的动态转换来改善用户体验。

模态幻灯片从开始（水平）

添加 modal-slide-start 实用程序从开始侧水平滑动模态；在从左到右（ LTR ）布局中，它从左边出现，在从右到左（ RTL ）布局中从右边出现。

Slide start modal

Horizontally slides the modal in and out from the start side.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-start" id="slideStartModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide start modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideStartModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Horizontally slides the modal in and out from the start side.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideStartModal.showModal()">Show Modal</button>

模态幻灯片从末端（水平）

添加 modal-slide-end 实用工具，用于从端部水平滑动模态；在从左到右（ LTR ）布局中，从右到左（ RTL ）布局中，从左到右。

Slide end modal

Horizontally slides the modal in and out from the end side.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-end" id="slideEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide end modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Horizontally slides the modal in and out from the end side.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideEndModal.showModal()">Show Modal</button>

从底部滑动（垂直） ： modal-slide-up

方向：从底部垂直滑入

Slide up modal

Vertically slides the modal in and out from the bottom.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-up" id="slideUpModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide up modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideUpModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Vertically slides the modal in and out from the bottom.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideUpModal.showModal()">Show Modal</button>

从顶部滑动（垂直）

添加 modal-slide-down 实用程序，以便从顶部垂直滑入。

Slide down modal

Vertically slides the modal in and out from the top.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<dialog class="modal modal-center lg:modal-middle modal-slide-down" id="slideDownModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Slide down modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="slideDownModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Vertically slides the modal in and out from the top.</p>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="slideDownModal.showModal()">Show Modal</button>

用于通知的滑动动画模态的示例使用

Notification modal
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<dialog class="modal modal-end modal-top modal-slide-end" id="notificationSlideModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Notification modal</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="notificationSlideModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
  </div>
</dialog>
<button type="button" class="btn btn-xs" onclick="notificationSlideModal.showModal()">Show Modal</button>

模态放置

默认情况下，模态组件位于屏幕的中心，但可以根据使用情况使用水平类将其放置 modal-start, modal-center，或 modal-end和垂直类 modal-top, modal-middle，或 modal-bottom。放置的设计考虑了RTL和LTR的兼容性，使模态能够适应不同的语言方向和布局。

使用 modal-start, modal-center，或 modal-end 用于水平放置和 modal-top, modal-middle，或 modal-bottom 用于垂直放置。这些类应用于模态组件。

左上角模态位置

Modal placement top left

Modal placed at the top left corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-top" id="topLeftModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top left</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topLeftModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top left corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topLeftModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topLeftModal.showModal()">Show Modal</button>

顶部中心模态放置

Modal placement top center

Modal placed at the top center corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-center modal-top" id="topCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topCenterModal.showModal()">Show Modal</button>

右上方模态位置

Modal placement top end

Modal placed at the top end corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-top" id="topEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement top end</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="topEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the top end corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="topEndModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="topEndModal.showModal()">Show Modal</button>

居中左侧模态放置

Modal placement left center

Modal placed at the start center corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-middle" id="startCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement left center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="startCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the start center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="startCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="startCenterModal.showModal()">Show Modal</button>

中心右侧模态放置

Modal placement right center

Modal placed at the end center corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-middle" id="endCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement right center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="endCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the end center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="endCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="endCenterModal.showModal()">Show Modal</button>

左下模态放置

Modal placement bottom start

Modal placed at the bottom start corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-start modal-bottom" id="bottomStartModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom start</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomStartModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom start corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomStartModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomStartModal.showModal()">Show Modal</button>

底部中心模态放置

Modal placement bottom center

Modal placed at the bottom center corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-center modal-bottom" id="bottomCenterModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomCenterModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomCenterModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomCenterModal.showModal()">Show Modal</button>

右下方模态位置

Modal placement bottom center

Modal placed at the bottom center corner of the screen
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<dialog class="modal modal-end modal-bottom" id="bottomEndModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Modal placement bottom center</div>
      <button type="button" class="btn btn-xs btn-square btn-rounded btn-ghost" onclick="bottomEndModal.close()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Modal placed at the bottom center corner of the screen</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="bottomEndModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="bottomEndModal.showModal()">Show Modal</button>

桌面和移动屏幕模态的响应式定位

根据您的使用案例，您可以将模态定位在桌面或移动设备上的任何位置，例如桌面中心和移动设备顶部中心。

Responsive modal

Resize the modal to a small screen to see the change in modal position.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal modal-center modal-top lg:modal-center lg:modal-middle" id="responsiveModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Resize the modal to a small screen to see the change in modal position.</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="responsiveModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="responsiveModal.showModal()">Show Modal</button>

基于语言方向的模态定位

根据语言方向（ LTR或RTL ）将模态放置在屏幕上的任何位置。

右对齐并在LTR和RTL中垂直居中

Responsive modal

Changing dir="rtl" in the HTML will have no effect on the modal's the position because the layout is controlled by utility classes: modal-end for the LTR variant and modal-start for the RTL variant.

html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<dialog class="modal ltr:modal-end ltr:modal-middle rtl:modal-start lg:modal-middle" id="ltrModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">
      Changing
      <code>dir="rtl"</code>
      in the HTML will have no effect on the modal's the position because the layout is controlled by utility classes:
      <code>modal-end</code>
      for the LTR variant and
      <code>modal-start</code>
      for the RTL variant.
    </p>
  </div>
  <button type="button" class="modal-backdrop" onclick="ltrModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="ltrModal.showModal()">Show Modal</button>

根据屏幕大小和语言方向放置模态

Responsive modal

Change the screen and screen direction to see the change in modal position.
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<dialog class="modal ltr:modal-center lg:ltr:modal-start ltr:modal-top lg:ltr:modal-middle rtl:modal-center lg:rtl:modal-start rtl:modal-bottom lg:rtl:modal-middle" id="mixedModal">
  <div class="modal-content">
    <div class="flex justify-between items-center gap-3">
      <div class="font-medium heading-lg">Responsive modal</div>
    </div>
    <div class="divider my-3"></div>
    <p class="para">Change the screen and screen direction to see the change in modal position.</p>
  </div>
  <button type="button" class="modal-backdrop" onclick="mixedModal.close()">
    Close Modal via Backdrop
  </button>
</dialog>
<button type="button" class="btn btn-xs" onclick="mixedModal.showModal()">Show Modal</button>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 莫代尔 类名称和结构。不再有幻觉课程。

尝试Cherry MCP