DeveloperBreeze

Custom Events Development Tutorials, Guides & Insights

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

Managing Modals with Livewire and JavaScript

Tutorial August 14, 2024
javascript php 

<?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');
    }
}

Modify your Livewire component's Blade view to call the methods defined in the component class.

Read More