how to close a dialog when click on backdrop
Hi guys, I'm learning about dialog element. I wonder how can I close the dialog when I click on backdrop?
23 Replies
Maybe this helps https://codepen.io/dvdvdmt/pen/BaavWbp
I am afraid we need JavaScript for that, but honestly I am not 100% sure about it (:
great. Thank you
In this case we absolutely need JS for this, you can't track the cursor click outside any other way
but why do you want the dialog to close when clicked outside?
also, is the dialog going to have something important, like a form?
if it has important information or a form, DO NOT DO THIS
you will only bring problems to people
As I know closing dialog when clicking on backdrop is common behavior. So I wonder how to do it
I believe you're mixing up the terms “dialog” and “modal window”. While some of the dialogs CAN BE modal, but it can also be non-modal
it is common, but depends on the use case
ahh. I thought they were the same
no, you can open a dialog without being modal
and in those cases, it doesnt have a backdrop
i think you just call
.show() instead of .showModal()
i always use it as a modal, so, i always forget
i just had the shittiest idea that MAY let you close a dialog without javascript
add a form with method="dialog"
then, inside, add a button
absolute position the form to top: 0, left: 0, bottom: 0, right: 0
add a submit button with display block and transparent background, at 100% width and height
let me test itI believe the difference is that modal should block interaction with the other parts of the page while it isn't close (this behavior should be intended) And if if it is not modal you should be able to interract with the page while it is shown. With the dialog backdrop isn't added automatically, but if it's modal it should come with a backdrop
IT WORKS! https://jsfiddle.net/o1pwbque/
its a terrible solution and you should NOT use it in production!
but ... IT WORKS!!!
yup, a modal also shifts focus to itself when it is open
I got it. Thanks guys
no problem
great solution. But why I should not use it?
because it sucks!
it really sucks
the dialog struggles to be positioned
the button is the size of a truck
it's a terrible workaround and you probably couldn't find any better with little to no js, terrible UX terrible everything, but yep it works
it may or may not reset forms too
probably an accessibility nightmare too
you need extra html for it to work
yup
I can't find a situation where you dont want to stick to this instead
but ... it works!
Ok guys. I got it
as a curiosity only
😊 i did bad code today 😊
now you know it is possible, and why you want to use js instead