Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Modal Component

CSS-only Tailwind CSS modal using native <dialog>. Responsive sizing, backdrop, and focus trap. No JavaScript for basic usage. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Các thành phần phương thức hiển thị thông tin quan trọng hoặc yêu cầu hành động của người dùng trong cửa sổ lớp phủ tập trung. Được xây dựng trên các phần tử hộp thoại HTML ngữ nghĩa, các phương thức hỗ trợ hoạt ảnh, định vị có thể tùy chỉnh và lớp phủ phông nền. Hệ thống phương thức Frutjam hoàn toàn có thể truy cập được bằng điều hướng bàn phím và tiêu điểm bẫy, lý tưởng cho việc xác nhận, biểu mẫu và hộp thoại cảnh báo.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
modalCăn cứVùng chứa lớp phủ hộp thoại toàn màn hình
modal-contentCông cụ sửa đổiBảng điều khiển bên trong có phần đệm và nền
modal-backdropCông cụ sửa đổiLớp phủ phông nền nhấp để đóng
modal-topCông cụ sửa đổiCăn chỉnh nội dung lên trên cùng của màn hình
modal-bottomCông cụ sửa đổiCăn chỉnh nội dung ở cuối màn hình
modal-startCông cụ sửa đổiCăn chỉnh nội dung sang trái
modal-endCông cụ sửa đổiCăn chỉnh nội dung về bên phải
modal-centerCông cụ sửa đổiCăn giữa theo chiều ngang
modal-middleCông cụ sửa đổiCăn giữa theo chiều dọc
modal-slide-upPhong cáchHoạt hình lối vào trượt lên
modal-slide-downPhong cáchHoạt hình lối vào trượt xuống
modal-slide-startPhong cáchTrượt vào từ hình ảnh động bên trái
modal-slide-endPhong cáchTrượt vào từ hình ảnh động bên phải

Cách sử dụng cơ bản

Thêm một id duy nhất vào phần tử HTML <dialog id="myModal">, sau đó sử dụng id đó trong JavaScript để gọi myModal.showModal() để mở phương thức và myModal.close() để đóng phương thức.

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>

Đóng phương thức khi nhấp vào bên ngoài

.modal-backdrop cung cấp nền có thể nhấp để đóng phương thức khi được nhấp vào bên ngoài nội dung phương thức.

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>

Hoạt ảnh slide phương thức

Trượt vào và ra một cách mượt mà từ trên cùng, dưới cùng, bắt đầu (trái trong LTR, phải trong RTL) hoặc kết thúc (phải trong LTR, trái trong RTL) với các lớp tiện ích định hướng sau: modal-slide-top, modal-slide-bottom, modal-slide-start và modal-slide-end trong thành phần phương thức. Những hoạt ảnh này cải thiện trải nghiệm người dùng thông qua việc sử dụng các hiệu ứng chuyển tiếp động dựa trên vị trí phương thức.

Trượt theo phương thức từ đầu (Ngang)

Thêm tiện ích modal-slide-start để trượt phương thức theo chiều ngang từ phía bắt đầu; trong bố cục từ trái sang phải (LTR), nó xuất hiện từ bên trái và trong bố cục từ phải sang trái (RTL), nó xuất hiện từ bên phải.

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>

Trượt theo phương thức từ cuối (Ngang)

Thêm tiện ích modal-slide-end trong thành phần phương thức để trượt phương thức theo chiều ngang từ phía cuối; trong bố cục từ trái sang phải (LTR), nó xuất hiện từ bên phải và trong bố cục từ phải sang trái (RTL), nó xuất hiện từ bên trái.

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>

Trượt từ dưới lên (Dọc): modal-slide-up

Hướng: Trượt theo chiều dọc từ dưới lên

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>

Trượt từ trên xuống (Dọc)

Thêm tiện ích modal-slide-down trong thành phần modal để trượt theo chiều dọc từ trên xuống.

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>

Ví dụ sử dụng phương thức hoạt ảnh trượt để thông báo

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>

Vị trí phương thức

Thành phần phương thức theo mặc định được đặt ở giữa màn hình, nhưng nó có thể được đặt tùy theo trường hợp sử dụng bằng cách sử dụng các lớp ngang modal-start, modal-center hoặc modal-end và các lớp dọc modal-top, modal-middle hoặc modal-bottom. Vị trí được thiết kế có tính đến khả năng tương thích RTL và LTR, giúp phương thức có thể thích ứng với các hướng và bố cục ngôn ngữ khác nhau.

Sử dụng modal-start, modal-center hoặc modal-end cho vị trí theo chiều ngang và modal-top, modal-middle hoặc modal-bottom cho vị trí theo chiều dọc. Các lớp này được áp dụng cho thành phần phương thức.

Vị trí phương thức trên cùng bên trái

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>

Vị trí phương thức trung tâm hàng đầu

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>

Vị trí phương thức trên cùng bên phải

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>

Vị trí phương thức ở giữa bên trái

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>

Vị trí phương thức ở giữa bên phải

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>

Vị trí phương thức dưới cùng bên trái

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>

Vị trí phương thức trung tâm dưới cùng

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>

Vị trí phương thức dưới cùng bên phải

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>

Định vị đáp ứng của phương thức cho màn hình máy tính để bàn và thiết bị di động

Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể định vị phương thức ở bất kỳ đâu trên máy tính để bàn hoặc thiết bị di động—ví dụ: trung tâm máy tính để bàn và trung tâm trên cùng của thiết bị di động.

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>

Định vị phương thức dựa trên hướng ngôn ngữ

Đặt phương thức ở bất cứ đâu trên màn hình tùy thuộc vào hướng ngôn ngữ (LTR hoặc RTL).

Căn phải và căn giữa theo chiều dọc trong LTR và 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>

Đặt phương thức dựa trên kích thước màn hình và hướng ngôn ngữ

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>