Creating A Popup/Modal With Laravel Livewire And No jQuery

Hello everybody !

Today we will create a modal with Laravel Livewire and without jQuery, actually without javascript at all. How cool is Livewire?

We will use Laravel 8 and Bootstrap 4, but feel free to use whatever CSS Framework you want, from Tailwind CSS to Bulma… It doesn’t matter. Actually you could just use pure CSS.

First we need to install livewire, you might already have it…

Now let’s add our Modal Component:

If you want to go deeper on how to configure livewire, you should read this tutorial: https://laravel-livewire.com/docs/2.x/quickstart

Now we should have something like this, it might be a little different, but it doesn’t matter:

Now let’s open our modal blade file, it should be in resources/views/livewire/modals/my-example-modal.blade.php. This file should just contain an empty div, so let’s copy the modal html from bootstrap. I made a simple modal for now and paste it in the blade file:

Let’s remove all the data-dismiss=”modal” and all the JS Bootstrap Stuff, we don’t need it, actually we don’t need JS at all. Everything will be handled by Livewire.

You could also remove jQuery from your project if you want.

This is why we added the backdrop / overlay inside our component. Bootstrap will not handle it, so we will.

Now let’s usk us a question: “How i will show up the modal with just livewire?”.

If you were using just Javascript you would set myModalExample display to block, when you want to show the modal, and add the class “show”.

We also need to set the modal backdrop to display: block;

When we want to hide the modal, just change display: none, on both myModalExample and modal backdrop.

So let’s just do it in Livewire, open our PHP Component Logic, and add this code:

And let’s add our blade logic in my-example-modal.blade.php:

Our logic is clear… When we click call doShow() we set show on true, and the correct display and CSS classes we will show up.

When we call doClose, the CSS classes will be removed and display set to none; All of this without a single line of JS ! How’s cool and fast is that ?

It saved tons and tons of time and also NO JQUERY. It is so light and fast on the client side. I like it very much.

How can i open the modal on click / event ?

Ok now i know the logic to show/close the modal, but i need to link it to some event, like a button click or something like that, how i do that ?

Fortunately Livewire has a mechanism called “Events Emission”, so we can “Emit” events and “Listen” to them.

We will just add a custom event and a listener, which we will trigger a component function that will show up the modal, or do whatever we want.

Let’s also put a button outside our componet that will trigger a modal show up/close.

Let’s open our welcome.blade.php and put some buttons to play with and let’s also add include our modal:

We use the special method $emit, first parameter is the event we want to emit, and the other parametes are data we want to pass to our receving component, in our case our modal. It can be anything, from Eloquent Models, to JSON, to Object or to Simple Strings.

Now let’s write our receiving logic, in our modal:

We listen to showModal, we get and set our data from $emit, in this case $this->data we will contain “SomeData” and we show up our modal with doShow();

Now we can also display our data in our modal, if we wish:

And we are done !

Now there is no limit on what you can do. You could put a form in a modal, pass complex data and much more.

This is just a basic example on how it works.

If you liked, please clap, there is so much work behind these articles.

Thanks,

Marco Caggiano.

Internet Marketer, Web Developer, Traveler

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store