Modal · Panel

Footer

This example showcases a modal with a footer that can contain action buttons.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal_footer">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal_footer">
    <div class="mv-modal-content max-w-[400px] top-[5%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_footer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
      <div class="mv-modal-footer">
        <div></div>
        <div class="flex gap-4">
          <button
            class="mv-btn mv-btn-secondary"
            data-mv-modal-dismiss="#modal"
          >
            Cancel</button
          ><button class="mv-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Center

Vertically and horizontally center the modal.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal2">Show Modal</button>
  <div class="mv-modal mv-modal-center" data-mv-modal="true" id="modal2">
    <div class="mv-modal-content max-w-[400px]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal2"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Scrollable

Apply the mv-scrollable-y class to the modal body element to enable vertical scrolling within the modal body.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal3">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal3">
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal3"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body max-h-[200px] pe-2">
        <div class="rounded-lg bg-muted w-full grow h-[600px]"></div>
      </div>
      <div class="mv-modal-footer gap-2.5 justify-end">
        <button class="mv-btn mv-btn-secondary" data-mv-modal-dismiss="#modal3">
          Cancel</button
        ><button class="mv-btn">Submit</button>
      </div>
    </div>
  </div>
</div>

Long Content

Apply the mv-scrollable-y class to the modal body element to enable vertical scrolling within the modal body.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal41">Show Modal</button>
  <div class="mv-modal mv-modal-center" data-mv-modal="true" id="modal41">
    <div class="mv-modal-content max-w-[400px] max-h-[95%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal41"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[600px]"></div>
      </div>
      <div class="mv-modal-footer">
        <div class="flex gap-4">
          <button
            class="mv-btn mv-btn-secondary"
            data-mv-modal-dismiss="#modal41"
          >
            Cancel</button
          ><button class="mv-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Static Backdrop

Use the attribute data-mv-modal-backdrop-static="true" to display a modal with a static backdropn that prevents modal closure on click on it.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal5">Show Modal</button>
  <div
    class="mv-modal"
    data-mv-modal="true"
    data-mv-modal-backdrop-static="true"
    id="modal5"
  >
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal5"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

No Backdrop

Use the attribute data-mv-modal-backdrop="false" to display a modal without the backdrop layer.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal6">Show Modal</button>
  <div
    class="mv-modal mv-modal-center"
    data-mv-modal="true"
    data-mv-modal-backdrop="false"
    id="modal6"
  >
    <div class="mv-modal-content border border-border max-w-[400px]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal6"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Persistent

Use the data-mv-modal-persistent="true" attribute to prevent modal closure when clicking outside of it.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal7">Show Modal</button>
  <div
    class="mv-modal mv-modal-fit mv-modal-center max-w-[400px]"
    data-mv-modal="true"
    data-mv-modal-backdrop="false"
    data-mv-modal-persistent="true"
    id="modal7"
  >
    <div class="mv-modal-content">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal7"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Toggle Modals

Switch between multiple modals for different actions.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal_one">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal_one">
    <div class="mv-modal-content max-w-[300px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_one"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
      <div class="mv-modal-footer">
        <button type="button" class="mv-btn" data-mv-modal-toggle="#modal_two">
          Launch Another Modal
        </button>
      </div>
    </div>
  </div>
  <div class="mv-modal" data-mv-modal="true" id="modal_two">
    <div class="mv-modal-content max-w-[400px] top-[5%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_two"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
      <div class="mv-modal-footer">
        <button type="button" class="mv-btn" data-mv-modal-toggle="#modal_one">
          Launch Previous Modal
        </button>
      </div>
    </div>
  </div>
</div>

Input Auto-focus

To automatically set focus on an input element within a modal when it appears, apply the data-mv-modal-autofocus="true" attribute to that input.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal8">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal8">
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal8"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <input
          type="text"
          data-mv-modal-input-focus="true"
          class="mv-input"
          placeholder="Modal input..."
        />
        <div class="rounded-lg bg-muted w-full grow mt-5 h-[175px]"></div>
      </div>
    </div>
  </div>
</div>

Page Scroll

Apply the data-mv-modal-disable-scroll="false" attribute to allow the page scrollbar to remain enabled.

<div class="h-[1000px">
  <button class="mv-btn" data-mv-modal-toggle="#modal9">Show Modal</button>
  <div
    class="mv-modal"
    data-mv-modal="true"
    data-mv-modal-disable-scroll="false"
    id="modal9"
  >
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal9"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
</div>

Full Width

The example below demonstrates the implementation of a full-width modal.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal10">Show Modal</button>
  <div class="mv-modal mv-modal-center" data-mv-modal="true" id="modal10">
    <div class="mv-modal-content">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal10"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>

Overlay

The example below illustrates an overlay modal that spans the entire screen size.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal11">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal11">
    <div class="mv-modal-content h-full">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal11"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body pe-2">
        <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
      </div>
      <div class="mv-modal-footer justify-end">
        <div class="flex gap-4">
          <button
            class="mv-btn mv-btn-secondary"
            data-mv-modal-dismiss="#modal"
          >
            Cancel</button
          ><button class="mv-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>

Sizes

Explore various modal width sizes set using Tailwind width classes.

<div class="flex gap-4">
  <button class="mv-btn" data-mv-modal-toggle="#modal_one1">Small</button
  ><button class="mv-btn" data-mv-modal-toggle="#modal_two1">Medium</button
  ><button class="mv-btn" data-mv-modal-toggle="#modal_three1">Large</button>
  <div class="mv-modal" data-mv-modal="true" id="modal_one1">
    <div class="mv-modal-content max-w-[320px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_one1"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
  <div class="mv-modal" data-mv-modal="true" id="modal_two1">
    <div class="mv-modal-content max-w-[420px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_two1"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
  <div class="mv-modal" data-mv-modal="true" id="modal_three1">
    <div class="mv-modal-content max-w-[600px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal_three1"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[250px]"></div>
      </div>
    </div>
  </div>
</div>

Basic Usage

Click the below toggle button to reveal the default modal example.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal1">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal1">
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          type="button"
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal1"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div class="rounded-lg bg-muted w-full grow h-[200px]"></div>
      </div>
    </div>
  </div>
</div>