包简介

A Livewire 4 modal component that supports multiple child modals while maintaining state

README 文档

README

A Livewire 4 modal component that supports multiple child modals while maintaining state.

Installation

composer require andisiahaan/livewire-modal

Setup

Add the Livewire directive to your layout file (typically before </body>):

<html>
<body>
    <!-- Your content -->
    
    @livewire('livewire-modal')
</body>
</html>

TailwindCSS

Add the following to your tailwind.config.js to include the modal styles:

export default {
    content: [
        './vendor/andisiahaan/livewire-modal/resources/views/*.blade.php',
        // ... your other paths
    ],
    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl']
        }
    ],
}

Creating a Modal

Create a Livewire component that extends ModalComponent:

<?php

namespace App\Livewire;

use AndiSiahaan\LivewireModal\ModalComponent;

class EditUser extends ModalComponent
{
    public $user;

    public function mount($userId)
    {
        $this->user = User::findOrFail($userId);
    }

    public function save()
    {
        // Save logic...
        
        $this->closeModal();
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}

Opening a Modal

You can open a modal by dispatching the openModal event:

<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openModal', { component: 'edit-user', arguments: { userId: 1 }})">
    Edit User
</button>

<!-- Inside a Livewire component -->
<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { userId: {{ $user->id }} }})">
    Edit User
</button>

Passing Parameters

Parameters are automatically injected into your modal component:

class EditUser extends ModalComponent
{
    public User $user; // Automatically resolved from route binding

    public function render()
    {
        return view('livewire.edit-user');
    }
}

<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">
    Edit User
</button>

Closing a Modal

From the view:

<button wire:click="$dispatch('closeModal')">Cancel</button>

From the component:

public function save()
{
    // Save logic...
    
    $this->closeModal();
}

With events:

public function save()
{
    $this->user->save();
    
    $this->closeModalWithEvents([
        UserList::class => 'refreshList',
    ]);
}

Nested Modals

You can open a modal from within another modal:

<!-- Inside EditUser modal -->
<button wire:click="$dispatch('openModal', { component: 'delete-user', arguments: { user: {{ $user->id }} }})">
    Delete User
</button>

When closing the child modal, it will return to the parent modal.

Force Close All Modals

$this->forceClose()->closeModal();

Skip Previous Modals

$this->skipPreviousModal()->closeModal();
// or skip multiple
$this->skipPreviousModals(2)->closeModal();

Modal Properties

Override these static methods in your modal component:

class EditUser extends ModalComponent
{
    // Modal width: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
    public static function modalMaxWidth(): string
    {
        return 'lg';
    }

    // Close when clicking outside
    public static function closeModalOnClickAway(): bool
    {
        return false;
    }

    // Close when pressing Escape
    public static function closeModalOnEscape(): bool
    {
        return true;
    }

    // Destroy component state on close
    public static function destroyOnClose(): bool
    {
        return true;
    }
}

Configuration

Publish the config file:

php artisan vendor:publish --tag=livewire-modal-config

Publish the views:

php artisan vendor:publish --tag=livewire-modal-views

License

MIT License. See LICENSE for more information.

andisiahaan/livewire-modal 适用场景与选型建议

andisiahaan/livewire-modal 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 5 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 04 月 24 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「modal」「alpine」「tailwindcss」「livewire」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 andisiahaan/livewire-modal 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 andisiahaan/livewire-modal 我们能提供哪些服务？

定制开发 / 二次开发

基于 andisiahaan/livewire-modal 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 andisiahaan/livewire-modal 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

meuhmeuhconcept/wkhtmltopdf-alpine 0

Binary of wkhtmltopdf runnable in docker alpine container.

levmyshkin/micromodal 0

Fork from ghosh/Micromodal. Tiny, dependency-free javascript library for creating accessible modal dialogs.

sanzgrapher/filament-draggable-modal 18

Make Filament modals draggable.

yousefaman/filament-modal-repeater 17

A Filament form component that displays repeater items in a table with modal-based editing.

ahmed-hussain/hasmany-to-modal 1

A Laravel Nova field. To create a modal for creating or viewing related HasMany records without leaving the index page

antkaz/yii2-ajax 2

andisiahaan/livewire-modal

包简介

关键字：