Close modal outside of Livewire or regular component

[MrMooky]

I was not able to find a solution to this yet. I'd like to close any open modal either from a global javascript, or another Livewire component (Livewire\Component, not LivewireUI\Modal\ModalComponent).

Calling $this->closeModal(); from a regular component throws an error, as expected.

Is this possible?

[PhiloNL]

@MrMooky I think Livewire.emit('closeModal') should do the trick 😄

[MrMooky]

Oh man, that one was too obvious. 😆 Thanks!

[timgavin]

I'm trying to do the same thing but keep getting an error. I want to have a generic close button in the top right of the modal that will work across ALL modals.

Something like this.

modal.blade.php

<div class="flex justify-between">
    <h2>{{ $title }}</h2>

    <button onclick="Livewire.emit('closeModal')">
        <i class="fas fa-times fa-lg"></i>
    </button>
</div>

I have a modal that displays a mini FAQ; when I close the FAQ modal I receive the following exception

Livewire\Exceptions\MethodNotFoundException
Unable to call component method. Public method [save] not found on component: [faq]

I have tried the following but none have worked; I continue to receive the error

onclick="Livewire.emit('closeModal', 'faq')"
onclick="Livewire.emit('closeModal', 'faq.save')"
onclick="Livewire.emit('closeModal', true)"

Is this not possible?

[timgavin]

I got it working.

<button type="button" onclick="Livewire.emit('closeModal', false)">
    <i class="fas fa-times fa-lg"></i>
</button>

If I did not include false and type="button", clicking on the button would actually fire the save() method in other components!