---
title: "Modal"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Modal using native HTML dialog. Accessible focus-trap, multiple sizes, and header/footer slots for overlays and confirmation dialogs."
url: https://frutjam.com/id/components/modal
---

# Modal Component

Komponen modal menampilkan informasi penting atau meminta tindakan pengguna dalam jendela overlay yang terfokus. Dibangun di atas elemen dialog HTML semantik, modals mendukung animasi, pemosisian yang dapat disesuaikan, dan hamparan latar belakang. Sistem modal Frutjam dapat diakses sepenuhnya dengan navigasi keyboard dan fokus jebakan, menjadikannya ideal untuk konfirmasi, formulir, dan dialog peringatan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas             | Jenis    | Keterangan                                           |
| ----------------- | -------- | ---------------------------------------------------- |
| modal             | Basis    | Wadah hamparan dialog layar penuh                    |
| modal-content     | Pengubah | Panel bagian dalam dengan padding dan latar belakang |
| modal-backdrop    | Pengubah | Hamparan latar belakang klik untuk menutup           |
| modal-top         | Pengubah | Menyelaraskan konten ke bagian atas layar            |
| modal-bottom      | Pengubah | Menyelaraskan konten ke bagian bawah layar           |
| modal-start       | Pengubah | Sejajarkan konten ke kiri                            |
| modal-end         | Pengubah | Sejajarkan konten ke kanan                           |
| modal-center      | Pengubah | Berpusat secara horizontal                           |
| modal-middle      | Pengubah | Berpusat secara vertikal                             |
| modal-slide-up    | Gaya     | Animasi pintu masuk slide-up                         |
| modal-slide-down  | Gaya     | Animasi pintu masuk geser ke bawah                   |
| modal-slide-start | Gaya     | Slide-in dari animasi kiri                           |
| modal-slide-end   | Gaya     | Slide-in dari animasi kanan                          |

## Penggunaan Dasar

Tambahkan id unik ke elemen HTML `<dialog id="myModal">`, lalu gunakan id tersebut di JavaScript untuk memanggil `myModal.showModal()` untuk membuka modal dan `myModal.close()` untuk menutup modal.

## Tutup modal saat klik di luar

`.modal-backdrop` menyediakan latar belakang yang dapat diklik yang menutup modal ketika diklik di luar konten modal.

```html
<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>
```

## Animasi Slide Modal

Geser masuk dan keluar dengan lancar dari atas, bawah, awal (kiri di LTR, kanan di RTL), atau akhir (kanan di LTR, kiri di RTL) dengan kelas utilitas arah berikut: `modal-slide-top`, `modal-slide-bottom`, `modal-slide-start`, dan `modal-slide-end` di komponen modal. Animasi ini meningkatkan pengalaman pengguna melalui penggunaan transisi dinamis berdasarkan posisi modal.

### Modal slide dari awal (Horizontal)

Tambahkan utilitas `modal-slide-start` untuk menggeser modal secara horizontal dari sisi awal; pada tata letak kiri-ke-kanan (LTR), muncul dari kiri, dan pada tata letak kanan-ke-kiri (RTL), muncul dari kanan.

```html
<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 dari ujung (Horizontal)

Tambahkan utilitas `modal-slide-end` di komponen modal untuk menggeser modal secara horizontal dari sisi ujung; pada tata letak kiri-ke-kanan (LTR), muncul dari kanan, dan pada tata letak kanan-ke-kiri (RTL), muncul dari kiri.

```html
<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>
```

### Geser dari Bawah (Vertikal): `modal-slide-up`

Arah: Geser secara vertikal dari bawah

```html
<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>
```

### Geser dari Atas (Vertikal)

Tambahkan utilitas `modal-slide-down` di komponen modal untuk meluncur secara vertikal dari atas.

```html
<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>
```

### Contoh penggunaan modal animasi geser untuk notifikasi

```html
<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>
```

## Penempatan modal

Komponen modal secara default diposisikan di tengah layar, namun dapat ditempatkan tergantung pada kasus penggunaan menggunakan kelas horizontal `modal-start`, `modal-center`, atau `modal-end`, dan kelas vertikal `modal-top`, `modal-middle`, atau `modal-bottom`. Penempatannya dirancang dengan mempertimbangkan kompatibilitas RTL dan LTR, membuat modal dapat beradaptasi dengan arah dan tata letak bahasa yang berbeda.

Gunakan `modal-start`, `modal-center`, atau `modal-end` untuk penempatan horizontal dan `modal-top`, `modal-middle`, atau `modal-bottom` untuk penempatan vertikal. Kelas-kelas ini diterapkan pada komponen modal.

### Penempatan modal kiri atas

```html
<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>
```

### Penempatan modal tengah atas

```html
<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>
```

### Penempatan modal kanan atas

```html
<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>
```

### Penempatan modal kiri tengah

```html
<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>
```

### Penempatan modal kanan tengah

```html
<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>
```

### Penempatan modal kiri bawah

```html
<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>
```

### Penempatan modal tengah bawah

```html
<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>
```

### Penempatan modal kanan bawah

```html
<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>
```

## Penempatan modal yang responsif untuk layar desktop dan seluler

Bergantung pada kasus penggunaan Anda, Anda dapat memposisikan modal di mana saja di desktop atau seluler—misalnya, pusat desktop dan pusat atas seluler.

```html
<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>
```

## Penempatan modal berdasarkan arah bahasa

Tempatkan modal dimanapun di layar tergantung pada arah bahasa (LTR atau RTL).

### Rata kanan dan terpusat secara vertikal di LTR dan RTL

```html
<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>
```

## Tempatkan modal berdasarkan ukuran layar dan arah bahasa

```html
<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>
```