Modified slightly, but this was actually a 🤯 moment.
Adding pointer-events: none;
to dialog::backdrop {}
means you can properly listen to click events!
https://codepen.io/paramagicdev/pen/gbYompq
=> More informations about this toot | More toots from konnorrogers@ruby.social
@mayank I came across your article on + showModal() + light-dismiss (https://blog.mayank.co/is-dialog-enough) and someone showed me a way using pointer-events: none;
on the dialog::backdrop {} and was curious if you had tried this. It seems to work in my very limited testing.
=> More informations about this toot | More toots from konnorrogers@ruby.social
@konnorrogers oof i need to delete that blog, i don't even remember my login details lmao
the pointer-events: none
solution sounds awesome. i need to test it some more, but if it works reliably, then i might add it to my reset 👀
=> More informations about this toot | More toots from mayank@front-end.social
@mayank
😆 we've all been there!
As for the dialog itself, I tested with Chrome 131, Firefox 133, Safari 17.5 and iOS Safari 18.1.1. all seem to behave as expected for me. Havent been able to break them yet. Dont have an android to test over there.
=> More informations about this toot | More toots from konnorrogers@ruby.social
@konnorrogers have you tested that there is no negative impact? i.e. it shouldn't break dialog.onclick, for example
the only issue with my current solution (checking event.target on the dialog's click event) is that it also gets triggered when clicking on the dialog's padding and border. i feel ok working around the padding, but the border is annoying
=> More informations about this toot | More toots from mayank@front-end.social
@mayank i did test the onclick attribute and click event listener, and as far as I can tell, they still work as expected. If theres an issue with it, i cant find it.
as for the clicking the border / padding, thats exactly why I was looking for a better way.
I guess the only thing that could break is if the browser ends up giving us actual light dismiss for modal dialogs that relies on the ::backdrop
receiving a click event?
=> More informations about this toot | More toots from konnorrogers@ruby.social This content has been proxied by September (ba2dc).Proxy Information
text/gemini