FilamentF
Filament•16mo ago
Neamix

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>


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;
}
}
Was this page helpful?