包简介

Open each livewire component in a modal window.

README 文档

README

A stacked modal system for Laravel Livewire 4.
Open any Livewire component in a modal — no traits, no modifications to your livewire component code.

Modals can also be stacked — open another modal from inside an open one with the same $modal() call.

Installation

composer require noerd/modal

Add source path to your resources/css/app.css file

@source '../../vendor/noerd/modal/resources/views/**/*.blade.php';

Configuration

Add Assets between your head tags.

<head>
...
<x-noerd::noerd-modal-assets/>
...
</head>

Add Modal Component to your layout. Make sure x-data is set on the body tag or any parent element of the modal component, otherwise the modal won't work.

<body x-data>
  <livewire:noerd-modal/>
...
</head>

Example Usage

Opening a Livewire component in a modal via a button

<button type="button"
    @click="$modal('livewire-component-name')">
    Open Modal
</button>

If you want to add parameters to your component which is opened in a modal:

<button type="button"
    @click="$modal('livewire-component-name', { name: 'John Doe' })">
    Open Modal
</button>

<?php

use Livewire\Component;

new class extends Component
{
    public string $name = ''; // will be set to John Doe
};
?>

<div class="p-4">
    {{$name}} {{-- Will display John Doe --}}
</div>

Stacked Modals

$modal(...) works the same way from inside an already-open modal — there is no extra API and no nesting limit. Calling it pushes a new modal onto the stack on top of the current one.

{{-- Inside a Livewire component that is itself open in a modal --}}
<button type="button"
    @click="$modal('another-livewire-component', { count: '{{ $count }}' })">
    Open another modal on top
</button>

Closing follows LIFO order:

ESC closes only the topmost modal.
Dispatch closeTopModal from PHP/Livewire to close the top modal programmatically.
Dispatch closeAllModals to clear the entire stack at once.

Layering is handled automatically: only the top modal is interactive; modals beneath it are dimmed and slightly scaled down — no styling work required on your end.

Publishing the Example

To publish the example components and a demo route, run:

php artisan noerd-modal:publish-example

This will:

Copy example components to resources/views/components/example/
Add a route /noerd-example-modal to routes/web.php

Example Livewire Starter Kit

If you are using the Livewire Starter Kit you can edit the sidebar.blade.php like this example to make noerd modal working

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
        <x-noerd::noerd-modal-assets/>
    </head>
    <body x-data class="min-h-screen bg-white dark:bg-zinc-800">
        <livewire:noerd-modal/>

noerd/modal 适用场景与选型建议

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

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

围绕 noerd/modal 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

noerd/modal

包简介