F
Filament•2w ago
Mostafa Amine

How to Control Filament Modal with JavaScript and Execute Custom Logic?

Hello, Filament Community! I am working on a Filament project and need some guidance on controlling a Filament modal via JavaScript. Specifically, I want to listen to modal-related events (like when it opens or closes) and execute custom logic inside a script. Here’s the code I’m currently using: 
<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>
<x-filament-panels::page>
    <x-filament::modal id="edit-user">
        <x-slot name="trigger">
            <x-filament::button>
                Open modal
            </x-filament::button>
        </x-slot>
     
        <video id="preview"></video>
    </x-filament::modal>
</x-filament-panels::page>

<script>
    // Here I want to listen to the modal event and execute some logic
</script>
I’ve already gone through the documentation, but unfortunately, none of the approaches mentioned worked for me. My main goals are: - Detect when the modal is opened or closed. - Execute JavaScript logic (e.g., interact with the <video> element inside the modal). Any examples or pointers would be greatly appreciated. Thank you in advance!
Modal Blade component - Core Concepts - Filament
3 Replies
Mostafa Amine
Mostafa AmineOP•2w ago
Common guys i need help
AIken
AIken•2w ago
Are you developer?
Mostafa Amine
Mostafa AmineOP•2w ago
Yes why?

Did you find this page helpful?