Level 102
I usually add a div that is positioned behind the modal but with a lower z-index. I then give it a click event
1 like
Sep 24, 2022
7
Level 5
Close model on click on overlay
greeting, i have modal with overlay i want when i click on overlay the modal close but if i click on modal nothing happend
Level 56
@Sinnbeck I think you meant z-index
Level 102
@rodrigo.pedra damn tiny mobile keyboard 🤣 thanks!
1 like
Level 5
@Sinnbeck i want to know the modifier that i can use to prevent close event from take place when i click on modal which is the child of overlay
Level 102
@CrastyCrap I make 3 divs
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
The overlay and content are both children. It should just work
1 like
Level 56
@crastycrap I think you referring to the self modifier?
https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
But I think you would still need a separated overlay <div> behind the modals' content, as you would apply @onclick.self="myHandler" to that element.
Which in practice is unneeded as the modal content is a sibling to the overlay and the click event won't bubble up to it.
the self modifier is useful when you want to make sure a click happened on the target element itself and not in one of its children Which is not the case on @sinnbeck 's suggestion that is also the most common model/overlay implementation.
1 like
Level 102
@rodrigo.pedra Well said. And actually I dont think z-index matters as they are siblings and content is last :)
1 like
Please or to participate in this conversation.