Add Toggable Option for Modal Component with Click Outside Functionality

[jensolafkoch]

I have a use case where I open a flyout modal with a button.

To close the modal you have to either press ESC or use the close button (X) .

But I would like to use the button as a toggle to show and hide the modal. Of course a classic modal is defined by not being able to access the original layer.

But I would like to have either an additional option right on the modal component to use it in a toggable way. That could work like Alpine's @click.outside. Clicking inside the modal should work as usual.

I would name such a prop for the component just "pseudo" or "toggable", "switchable" or "clickawayable" :-). ChatGPT suggest "flickslideable" but that's a bit weird, although I expressively asked for a neologism. :-)