Ancestors

Written by Konnor Rogers on 2025-01-06 at 16:25

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

Toot

Written by Konnor Rogers on 2025-01-06 at 22:53

@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

Descendants

Written by Mayank on 2025-01-07 at 00:39

@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

Written by Konnor Rogers on 2025-01-07 at 00:53

@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

Written by Mayank on 2025-01-07 at 01:04

@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

Written by Konnor Rogers on 2025-01-07 at 01:39

@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

Proxy Information
Original URL
gemini://mastogem.picasoft.net/thread/113783867189106388
Status Code
Success (20)
Meta
text/gemini
Capsule Response Time
282.609042 milliseconds
Gemini-to-HTML Time
0.904114 milliseconds

This content has been proxied by September (ba2dc).