Modal - JS + CSS

Modal

ReactVueJS + CSS

Struktur HTML

Copy

<button
  type="button"
  class="ina-button ina-button--primary ina-button--md"
  id="modal-trigger"
>
  Open Modal
</button>

<div class="ina-modal" id="modal" style="display: none;">
  <div class="ina-modal__backdrop" id="modal-backdrop"></div>
  <div class="ina-modal__container">
    <div class="ina-modal__dialog ina-modal__dialog--size-md" role="dialog" aria-modal="true" aria-labelledby="modal-title">
      <div class="ina-modal__header">
        <h2 class="ina-modal__title" id="modal-title">Basic Modal</h2>
        <button type="button" class="ina-modal__close-button" aria-label="Tutup dialog">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="ina-modal__close-icon"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <div class="ina-modal__body">
        <p>This is a basic modal with a title and content. You can close it by clicking the X button or clicking outside the modal.</p>
      </div>
    </div>
  </div>
</div>

Contoh Penggunaan

Contoh 1

Preview Code

Open Basic Modal

Basic Modal

This is a basic modal with a title and content.

You can close it by clicking the X button or clicking outside the modal.

Copy

<div style="padding: 20px">
  <button
    type="button"
    class="ina-button ina-button--primary ina-button--md"
    id="modal-variant-first-trigger"
    data-toggle="modal"
    data-target="#modal-variant-first"
  >
    Open Basic Modal
  </button>

  <!-- Modal -->
  <div
    class="ina-modal"
    id="modal-variant-first"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-variant-first-title"
    aria-hidden="true"
    style="display: none"
  >
    <!-- Backdrop -->
    <div class="ina-modal__backdrop"></div>

    <!-- Container -->
    <div class="ina-modal__container">
      <!-- Dialog -->
      <div class="ina-modal__dialog ina-modal__dialog--size-md" id="modal-variant-first-dialog">
        <!-- Header -->
        <div class="ina-modal__header">
          <div class="ina-modal__title">
            <h2 id="modal-variant-first-title">Basic Modal</h2>
          </div>
          <button
            type="button"
            class="ina-modal__close-button"
            data-dismiss="modal"
            aria-label="Tutup dialog"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="ina-modal__close-icon"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <!-- Body -->
        <div class="ina-modal__body">
          <p>This is a basic modal with a title and content.</p>
          <p>You can close it by clicking the X button or clicking outside the modal.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && window.InaUI.initModal) {
      window.InaUI.initModal();
    }
  });

  // Fallback for initial load
  if (window.InaUI && window.InaUI.initModal) {
    window.InaUI.initModal();
  } else {
    window.addEventListener('load', () => {
      if (window.InaUI && window.InaUI.initModal) {
        window.InaUI.initModal();
      }
    });
  }
</script>

Contoh 2

Preview Code

Open Modal with Actions

Confirm Action

Are you sure you want to proceed with this action?

Cancel Confirm

Copy

<div style="padding: 20px">
  <button
    type="button"
    class="ina-button ina-button--primary ina-button--md"
    id="modal-variant-two-trigger"
    data-toggle="modal"
    data-target="#modal-variant-two"
  >
    Open Modal with Actions
  </button>

  <!-- Modal -->
  <div
    class="ina-modal"
    id="modal-variant-two"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-variant-two-title"
    aria-hidden="true"
    style="display: none"
  >
    <!-- Backdrop -->
    <div class="ina-modal__backdrop"></div>

    <!-- Container -->
    <div class="ina-modal__container">
      <!-- Dialog -->
      <div class="ina-modal__dialog ina-modal__dialog--size-md" id="modal-variant-two-dialog">
        <!-- Header -->
        <div class="ina-modal__header">
          <div class="ina-modal__title">
            <h2 id="modal-variant-two-title">Confirm Action</h2>
          </div>
          <button
            type="button"
            class="ina-modal__close-button"
            data-dismiss="modal"
            aria-label="Tutup dialog"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="ina-modal__close-icon"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <!-- Body -->
        <div class="ina-modal__body">
          <p>Are you sure you want to proceed with this action?</p>
          <div style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end">
            <button
              type="button"
              class="ina-button ina-button--hierarchy-secondary ina-button--size-md"
              data-dismiss="modal"
            >
              Cancel
            </button>
            <button
              type="button"
              class="ina-button ina-button--hierarchy-primary ina-button--size-md"
              data-dismiss="modal"
              onclick="alert('Confirmed!')"
            >
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && window.InaUI.initModal) {
      window.InaUI.initModal();
    }
  });

  // Fallback
  if (window.InaUI && window.InaUI.initModal) {
    window.InaUI.initModal();
  } else {
    window.addEventListener('load', () => {
      if (window.InaUI && window.InaUI.initModal) {
        window.InaUI.initModal();
      }
    });
  }
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan