FilamentF
Filament•12mo 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>


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