Vue.js hunt for perfect modal
source link: https://www.tuicool.com/articles/hit/iQ732yI
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Hey. Today we will pursue our dream of a perfect modal. Perfect means:
- It floats above everything else.
- Is not blocking.
- Supports nesting of any depth.
- Doesn’t collide with other elements on the page.
Seems easy enough, right? Let’s glance over different solutions I harbored.
Full screen overlay
For this solution we create invisible overlay over a whole window. Overlay catches all clicks.
Template
Style
Looks fine, doesn’t it? Except that it’s blocking… Which means that, in order to open another modal, a user has to close the current one. That’s 2 actions and we can do better.
Here’s the component code .
Stop propagation + document event
For this approach we attach a click event handler to document.body
, we also prevent click event propagation on modal click.
Template
Script
The downside is that any other modal will prevent bubbling to document
.
Meaning no nesting ¯\_(ツ)_/¯
.
Here’s the component code .
Document event + event target check
Ok. This is an ultimate solution. For the most part it’s the same as a previous one. Only that we won’t prevent propagation. And instead we’ll check the event.target
.
Template
Template is regular. Nothing special here.
Script
We check, if a click landed on a child. In case it didn’t — modal hides itself.
Here’s the component code .
Let’s test our modal.
- ✔ It floats above everything else.
- ✔ Is not blocking.
- ✔ Supports nesting of any depth.
- ✔ Doesn’t conflict with other elements on the page.
Done.
Check the source code if you’re looking for complete components.
Tell me if anything is wrong or this modal is not nearly perfect in your opinion. : 3
Connect Deeper
If you like what you just read, please subscribe to our newsletter to get more content from Epicmax and bonus code that will give you a discount for first 30 days working with us.
Recommend
-
59
So what's modal logic, anyway? Modal logicis a type of symbolic logic for capturing inferences about necessity and possibility . As with other logical systems,...
-
44
Looks fine, doesn’t it? Except that it’s blocking… Which means that, in order to open another modal, a user has to close the current one. That’s 2 actions and we can do better. For this approach we…
-
19
I love modals because they save a lot of time required to load a new tab. In this post, we’re going to learn how to create an awesome reusable modal with React from scratch. These are the steps for this tutorial:...
-
6
Tutorial How To Build a Modal Component with Vue.js Development
-
1
[Vue.js] Modal (Popup)Modal (Popup) implementation via Vue.js and CSS. According to w3schools, modal is dialog box/popup window that is displayed on top of the current page...
-
4
[Vue.js] Bulma Modal September 27, 2018 Toggle
-
4
[Vue.js] Bootstrap Modal September 26, 2018 Toggle
-
2
Ranked #7 for todayCoFounder AppFind your perfect Co-founderFree OptionsAn app for aspiring entreprene...
-
3
The perfect AI-generated LinkedIn headshots
-
3
Master investor Q&A to get fundedSort by: Hi Product Hunt 👋 We are excited to introduce Pitch Perfect, a tool designed to help founders prepare for commonly asked questions by angel investors and venture capitali...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK