Filament•3mo ago

Filament Modal

I have a custom page contain button on click on that button i want modal to open i tried to use emit but it doesnt work my blade code

<x-filament-panels::page>
    <div>
        <x-filament::button wire:click="openModal">
            Invite a member
        </x-filament::button>

        <x-filament::modal wire:model="isModalOpen" class="w-100">
            <x-slot name="trigger">
                <!-- Trigger content if needed -->
            </x-slot>
            
            <x-slot name="heading">
                <div class="flex justify-between">
                    <h3>Invite a new member</h3>
                </div>
            </x-slot>

            <div class="w-100">
                {{ $this->form }}
            </div>
        
            <x-slot name="footer">
                <x-filament::button wire:click="submit">
                    Invite
                </x-filament::button>

                <x-filament::button color="danger" x-on:click="closeModal">
                    Close
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div>
        <x-filament::button wire:click="openModal">
            Invite a member
        </x-filament::button>

        <x-filament::modal wire:model="isModalOpen" class="w-100">
            <x-slot name="trigger">
                <!-- Trigger content if needed -->
            </x-slot>
            
            <x-slot name="heading">
                <div class="flex justify-between">
                    <h3>Invite a new member</h3>
                </div>
            </x-slot>

            <div class="w-100">
                {{ $this->form }}
            </div>
        
            <x-slot name="footer">
                <x-filament::button wire:click="submit">
                    Invite
                </x-filament::button>

                <x-filament::button color="danger" x-on:click="closeModal">
                    Close
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
    </div>
</x-filament-panels::page>

my .php file ``` <?php namespace App\Filament\Pages; use Filament\Pages\Page; use Filament\Forms; use Filament\Forms\Components\TextInput; use Filament\Notifications\Notification; use Filament\Actions\Action; class Members extends Page { protected static ?string $navigationIcon = 'heroicon-o-document-text'; protected static string $view = 'filament.pages.members'; protected static ?string $navigationLabel = "members"; protected static ?string $title = "members"; protected ?string $heading = ""; public $showInvitationModal = true; public function openModal() { $this->showInvitationModal = true; } public function closeModal() { $this->showInvitationModal = false; } }

2 Replies

LeandroFerreira•3mo ago

Why not a modal form? https://filamentphp.com/docs/3.x/actions/modals#modal-forms

Modals - Actions - Filament

Neamix•3mo ago

i tried to use it on custom page but it doesnt work i am still new to filament here is my code after i tried to use it component blade

<x-filament-panels::page>
    <div class="member_headers">
        <x-filament::button wire:click='openModal'>
            Add new member 
        </x-filament::button>

        @foreach ($this->getActions() as $action)
            {{ $action->button() }}
        @endforeach
       
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div class="member_headers">
        <x-filament::button wire:click='openModal'>
            Add new member 
        </x-filament::button>

        @foreach ($this->getActions() as $action)
            {{ $action->button() }}
        @endforeach
       
    </div>
</x-filament-panels::page>

and component class

  protected function getActions(): array
    {
        return [
            Action::make('openModal')
                ->label('Open Modal')
                ->action('openModal')
                ->modalHeading('My Custom Modal')
                ->modalContent(fn (Forms\ComponentContainer $form) => [
                    TextInput::make('name')->label('Your Name'),
                ])
                ->modalActions([
                    Action::make('submit')
                        ->label('Submit')
                        ->action('submitForm'),
                    Action::make('cancel')
                        ->label('Cancel')
                        ->color('secondary'),
                ]),
        ];
    }

  protected function getActions(): array
    {
        return [
            Action::make('openModal')
                ->label('Open Modal')
                ->action('openModal')
                ->modalHeading('My Custom Modal')
                ->modalContent(fn (Forms\ComponentContainer $form) => [
                    TextInput::make('name')->label('Your Name'),
                ])
                ->modalActions([
                    Action::make('submit')
                        ->label('Submit')
                        ->action('submitForm'),
                    Action::make('cancel')
                        ->label('Cancel')
                        ->color('secondary'),
                ]),
        ];
    }

Gaming

Programming

Filament Modal