Modal

How it works

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Basic example

Click the button below to open the modal.

Open modal with slot
<x-modal.toggle id="ComponentExample" class="btn btn-primary mb-3">Open modal with component</x-modal.toggle>
<x-modal.toggle.a id="SlotExample" class="btn btn-success mb-3">Open modal with slot</x-modal.toggle.a>

<x-modal id="ComponentExample">
    <x-modal.dialog>
        <x-modal.content>
            <x-modal.header>My modal title</x-modal.header>

            <x-modal.body>
                Hi, there! I'm a modal build with blade component.
            </x-modal.body>

            <x-modal.footer>
                <a href="#" class="btn btn-danger">Action</a>
            </x-modal.footer>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>

<x-modal id="SlotExample">
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">My modal title via slot</x-slot>

            <x-slot name="body">
                Hi, there! My modal body via slot.
            </x-slot>

            <x-slot name="footer">
                <a href="#" class="btn btn-danger">Action via slot</a>
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>
<button type="button"
      class="btn btn-primary mb-3"
      data-bs-toggle="modal"
      data-bs-target="#ComponentExampleModal">Open modal with component</button> <a href="#SlotExampleModal"
      class="btn btn-success mb-3"
      data-bs-toggle="modal"
      role="button">Open modal with slot</a>
<div class="modal fade"
     id="ComponentExampleModal"
     tabindex="-1"
     aria-labelledby="ComponentExampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="ComponentExampleModalLabel">
          My modal title
        </h5>
      </div>

      <div class="modal-body">
        Hi, there! I'm a modal build with blade component.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button> <a href="#"
             class="btn btn-danger">Action</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade"
     id="SlotExampleModal"
     tabindex="-1"
     aria-labelledby="SlotExampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="SlotExampleModalLabel">
          My modal title via slot
        </h5>
      </div>

      <div class="modal-body">
        Hi, there! My modal body via slot.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button> <a href="#"
             class="btn btn-danger">Action via slot</a>
      </div>
    </div>
  </div>
</div>

Static example

Add prop static for make the modal static. When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

<x-modal.toggle id="StaticExample" class="btn btn-dark mb-3">Open static modal</x-modal.toggle>
<x-modal id="StaticExample" static>
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a static modal</x-slot>

            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop">static modal</a> by adding attribute "static".
                <br>
                When backdrop is set to static, the modal will not close when clicking outside it.
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>
<button type="button"
      class="btn btn-dark mb-3"
      data-bs-toggle="modal"
      data-bs-target="#StaticExampleModal">Open static modal</button>
<div class="modal fade"
     id="StaticExampleModal"
     data-bs-backdrop="static"
     tabindex="-1"
     aria-labelledby="StaticExampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="StaticExampleModalLabel">
          I'm a static modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop">static modal</a> by adding attribute "static".<br>
        When backdrop is set to static, the modal will not close when clicking outside it.
      </div>
    </div>
  </div>
</div>

Scrollable example

Add prop scrollable for make the modal scrollable. When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

<x-modal.toggle id="ScrollableExample" class="btn btn-success mb-3">Open scrollable modal</x-modal.toggle>
<x-modal id="ScrollableExample" scrollable>
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a scrollable modal</x-slot>
            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#scrolling-long-content">scrollable modal</a> by adding attribute "scrollable".
                <br>
                When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
                @for($i = 0; $i < 100; $i++)
                    <br>
                @endfor
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>
<button type="button"
      class="btn btn-success mb-3"
      data-bs-toggle="modal"
      data-bs-target="#ScrollableExampleModal">Open scrollable modal</button>
<div class="modal fade"
     scrollable="scrollable"
     id="ScrollableExampleModal"
     tabindex="-1"
     aria-labelledby="ScrollableExampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="ScrollableExampleModalLabel">
          I'm a scrollable modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#scrolling-long-content">scrollable modal</a> by adding attribute "scrollable".<br>
        When modals become too long for the user’s viewport or device, they scroll independent of the page itself.<br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>
</div>

Centered example

Add prop centered for make the modal vertically centered.

<x-modal.toggle id="CenteredExample" class="btn btn-primary">Open centered modal</x-modal.toggle>
<x-modal id="CenteredExample" centered>
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a centered modal</x-slot>

            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#vertically-centered">vertically centered modal</a> by adding attribute "centered".
                <br>
                Vertically center a modal.
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>
<button type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#CenteredExampleModal">Open centered modal</button>
<div class="modal fade"
     centered="centered"
     id="CenteredExampleModal"
     tabindex="-1"
     aria-labelledby="CenteredExampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="CenteredExampleModalLabel">
          I'm a centered modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#vertically-centered">vertically centered modal</a> by adding attribute "centered".<br>
        Vertically center a modal.
      </div>
    </div>
  </div>
</div>

Sizes example

Modals have three optional sizes, available via prop size="sm|lg|xl". These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

<x-modal.toggle id="SizeExample-1" class="btn btn-secondary mb-3">Open small modal</x-modal.toggle>
<x-modal id="SizeExample-1" size="sm">
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a small modal</x-slot>
            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="sm".
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>

<x-modal.toggle id="SizeExample-2" class="btn btn-secondary mb-3">Open large modal</x-modal.toggle>
<x-modal id="SizeExample-2" size="lg">
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a large modal</x-slot>
            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="lg".
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>

<x-modal.toggle id="SizeExample-3" class="btn btn-secondary mb-3">Open extra large modal</x-modal.toggle>
<x-modal id="SizeExample-3" size="xl">
    <x-modal.dialog>
        <x-modal.content>
            <x-slot name="header">I'm a extra large modal</x-slot>
            <x-slot name="body">
                Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="xl".
            </x-slot>
        </x-modal.content>
    </x-modal.dialog>
</x-modal>
<button type="button"
      class="btn btn-secondary mb-3"
      data-bs-toggle="modal"
      data-bs-target="#SizeExample-smModal">Open small modal</button>
<div class="modal fade"
     size="sm"
     id="SizeExample-smModal"
     tabindex="-1"
     aria-labelledby="SizeExample-smModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="SizeExample-smModalLabel">
          I'm a small modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="sm".
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-secondary mb-3"
      data-bs-toggle="modal"
      data-bs-target="#SizeExample-lgModal">Open large modal</button>
<div class="modal fade"
     size="lg"
     id="SizeExample-lgModal"
     tabindex="-1"
     aria-labelledby="SizeExample-lgModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="SizeExample-lgModalLabel">
          I'm a large modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="lg".
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-secondary mb-3"
      data-bs-toggle="modal"
      data-bs-target="#SizeExample-xlModal">Open extra large modal</button>
<div class="modal fade"
     size="xl"
     id="SizeExample-xlModal"
     tabindex="-1"
     aria-labelledby="SizeExample-xlModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="SizeExample-xlModalLabel">
          I'm a extra large modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#optional-sizes">modal sizes</a> using size="xl".
      </div>
    </div>
  </div>
</div>

Fullscreen example

Another override is the option to pop up a modal that covers the user viewport, available via prop fullscreen="true|sm|md|lg|xl|xxl". When you set the prop as boolean true, for example :fullscreen="true", then the modal is always fullscreen. Otherwise it use the defined breakpoints of bootstrap. See below in action.

<x-modal.toggle id="FullScreenExample-1" class="btn btn-danger mb-3">Open always fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-1" fullscreen>
    <!-- Modal content -->
</x-modal>

<x-modal.toggle id="FullScreenExample-2" class="btn btn-danger mb-3">Open sm down fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-2" fullscreen="sm">
    <!-- Modal content -->
</x-modal>

<x-modal.toggle id="FullScreenExample-3" class="btn btn-danger mb-3">Open md down fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-3" fullscreen="md">
    <!-- Modal content -->
</x-modal>

<x-modal.toggle id="FullScreenExample-4" class="btn btn-danger mb-3">Open lg down fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-4" fullscreen="lg">
    <!-- Modal content -->
</x-modal>

<x-modal.toggle id="FullScreenExample-5" class="btn btn-danger mb-3">Open xl down fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-5" fullscreen="xl">
    <!-- Modal content -->
</x-modal>

<x-modal.toggle id="FullScreenExample-6" class="btn btn-danger mb-3">Open xxl down fullscreen modal</x-modal.toggle>
<x-modal id="FullScreenExample-6" fullscreen="xxl">
    <!-- Modal content -->
</x-modal>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-trueModal">Open always fullscreen modal</button>
<div class="modal fade"
     fullscreen="fullscreen"
     id="FullScreenExample-trueModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-trueModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-trueModalLabel">
          I'm a always fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="true".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-smModal">Open sm down fullscreen modal</button>
<div class="modal fade"
     fullscreen="sm"
     id="FullScreenExample-smModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-smModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-sm-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-smModalLabel">
          I'm a sm down fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="sm".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-mdModal">Open md down fullscreen modal</button>
<div class="modal fade"
     fullscreen="md"
     id="FullScreenExample-mdModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-mdModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-md-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-mdModalLabel">
          I'm a md down fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="md".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-lgModal">Open lg down fullscreen modal</button>
<div class="modal fade"
     fullscreen="lg"
     id="FullScreenExample-lgModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-lgModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-lgModalLabel">
          I'm a lg down fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="lg".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-xlModal">Open xl down fullscreen modal</button>
<div class="modal fade"
     fullscreen="xl"
     id="FullScreenExample-xlModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-xlModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-xl-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-xlModalLabel">
          I'm a xl down fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="xl".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button type="button"
      class="btn btn-danger mb-3"
      data-bs-toggle="modal"
      data-bs-target="#FullScreenExample-xxlModal">Open xxl down fullscreen modal</button>
<div class="modal fade"
     fullscreen="xxl"
     id="FullScreenExample-xxlModal"
     tabindex="-1"
     aria-labelledby="FullScreenExample-xxlModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-fullscreen-xxl-down">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"
            id="FullScreenExample-xxlModalLabel">
          I'm a xxl down fullscreen modal
        </h5>
      </div>

      <div class="modal-body">
        Set a <a href="https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal">modal fullscreen</a> using :fullscreen="xxl".<br>
        Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
      </div>

      <div class="modal-footer">
        <button type="button"
             class="btn btn-secondary"
             data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Modal with form example

If you need to show a form inside a modal, you can do so by using component x-modal.form. Find below an example with login form. You can pass prop action and other forms props directly in the parent component. Find more info about form components here.