DeveloperBreeze

Livewire Components Development Tutorials, Guides & Insights

Unlock 1+ expert-curated livewire components tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your livewire components skills on DeveloperBreeze.

Managing Modals with Livewire and JavaScript

Tutorial August 14, 2024
javascript php

Add methods to dispatch custom browser events when buttons are clicked:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ModalManager extends Component
{
    public function openUserProfileModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'user-profile-modal']);
    }

    public function openSettingsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'settings-modal']);
    }

    public function openNotificationsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'notifications-modal']);
    }

    public function render()
    {
        return view('livewire.modal-manager');
    }
}