Great article.
I didn't know neither about :target (supports from Chrome 1) nor <dialog> 🤦 shame on me.
Speaking about the code, just noticed your modal behaves different than the one from MDN: click to grey area doesn't close the popup (::backdrop in case of dialog element). Styling .modal__close:before, .modal__close:after (with z-index) and moving .modal__close itself to #modal's children level do the trick.
If anyone needs a quickfix - i used the onclick to fix this background closing. It not plain css of course, but it improves usability for my application:
I extended the same logic with <div id="modal" onclick="location.href='#'"; >
finally the grey background closes like the X before.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great article.
I didn't know neither about
:target(supports from Chrome 1) nor<dialog>🤦 shame on me.Speaking about the code, just noticed your modal behaves different than the one from MDN: click to grey area doesn't close the popup (::backdrop in case of dialog element). Styling
.modal__close:before,.modal__close:after(with z-index) and moving.modal__closeitself to#modal's children level do the trick.If anyone needs a quickfix - i used the onclick to fix this background closing. It not plain css of course, but it improves usability for my application:
I extended the same logic with
<div id="modal" onclick="location.href='#'"; >finally the grey background closes like the X before.