Modals Components

Usage

Include the livewire component in your layout file so that the modal can be invoked anywhere in your application.

      @livewire('login-modal')
    

Bootstrap modal can be invoked using HTML tags or using javascript.

To invoke the modal when the user clicks on any HTML input. Such as the button showed the demo:

    <button class="btn bg-purple fw-bold text-white btn-lg" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>

You can include the data-bs-toggle and data-bs-target attributes in your HTML tag.

Documentation

We have utilized the Bootstrap's Modal to design the login modal.

At the backend, when the user clicks on the Login button. We call the login method of the livewire component.

We utilize the Auth::attempt() method provided by Laravel to check if the credentials are correct. If yes we log in the user and refresh the existing page. If authentication fails, we show the error message to the user inside the modal itself.

Usage

You need to include the create user modal component in the file from where you want to invoke the modal. Include it in the global template if you want the modal to be opened up from anywhere in your application.

@livewire('add-new-user-component')

To show the modal you need to pass the information using events. For example, as shown in the demo above to open it with the click of a button you can do it like below.

  <button x-data={} x-on:click="window.livewire.emitTo('add-new-user-component','showModal')" class="btn btn-primary text-white">Add New User</button>

Usage

Include the component on the page from where you want to invoke the modal. You can also choose it and include it on the gobal template

@livewire('delete-modal-component')

To invoke the confirmation modal with the click of the delete button. You can emit the event to the model using Livewire's dispatchTo method.

Here is an example of emitting the event through Alpine JS

<button x-data="{}"
  @click="Livewire.dispatchTo(`delete-modal-component`,`showModal`, {
  modelType: `App\\Models\\Accommodation`,
  modelId: {{$accommodation->AccomodationTypeID}},
  modalHeading: `Delete Accommodation`,
  modalMessage: `Are you sure you want to delete accommodation {{$accommodation->Description}}?`,
  })" class="text-red-600 hover:text-red-900">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
  </svg>
</button>

Here, we are passing four parameters in the emitTo method.

1. Component where we want to send the event (delete-modal-confirm in this case)
2. Method to which we want to send the event to (showModal in this demo)
3. Modal which you want to delete (App\\Models\\DummyUser) in this example
4. Id of the modal which we are looking to delete
5. Modal Heading
6. Modal Message.

Usage

Include the livewire component on the page where you want the Modal to work, include the component inside your layout if you want it to work on all the pages.

To invoke the Modal on click of a button, you can emit the event to the Modal component as shown below.

        <button wire:click="$emitTo('simple-tailwind-modal','show')" class="btn btn-primary text-white">Open Model</button>

Documentation

This is the demonstration of a simple livewire modal component that uses TailwindCSS for the styling and also uses Alpine.js for the show and hide behavior.

We have used the magic method entangle provided by Livewire to keep the state (show/hide) in sync between Livewire and Alpine.js.