In this episode, we dig into the three main ways you can close a modal. Right now, the modal can't be closed at all — you can't press escape, click outside it, or use a button inside the modal. So, we fix all that!
First up, we show how pressing the Escape key or clicking outside the modal can close it. If you're using something like Headless UI's <Dialog>
, it gives you a handy event for this. We connect this event so that when it fires, we simply call the close
function provided by our modal composable, and poof — the modal disappears with a nice transition. We demo this by refreshing the page, trying Escape, and clicking outside, all of which work perfectly.
Next, we cover adding an actual close button inside the modal, probably the most familiar way for users. We stick a button in the modal and hook it up to the same close
function. Whenever you click it, the modal closes, simple as that. You can style it however you like — the standard "x" in the top corner is always a good option!
Then we talk about exposing the close method to slot content, so you can put a close button anywhere in the modal content, not just in the dialog panel itself. We show how to pass the close method to the slot, so you don't need to import or wire up the composable every single time you want to close from some content.
By the end, you'll have complete control: close by escape, clicking the overlay, button in the modal, or even programmatically if needed. Super flexible! Next, we'll look at more programmatic patterns, like closing after an asynchronous action.