If you have used a modal or tooltip-like widget, you might hear some fancy terminologies such as Portal, Modal, Popup, Popover, Popper, Dialog, Tooltip and etc. These words sounds related to each other, thus can become quite confusing quickly.
So why exactly do they have to be this complicated? Why can’t they be just like buttons? This article will try to go over some aspects of it, and hopefully by the end of it, you can answer this question yourself.
Simplicity doesn’t exist here mainly because the browser hasn’t implement them yet. Therefore as a developer, we need to implement them. Since everyone has different tastes and capabilities, thus comes many variations and disagreements. Of course this subject isn’t easy either.
Portal
The main idea of the modal is to pop up some content on the screen. The popup isn’t suppose to interfere with the existing layout. Moreover, we want to toggle the popup on and off efficiently.
Therefore technically speaking, we wouldn’t be able to achieve this by creating the popup element inside the existing DOM element, because the new element can shift or move the existing ones around. Instead we want to allocate the new one to a safer location. This way, touching either of the elements becomes hassle free. This location is called a Portal, which essentially holds another branch of DOM. Suppose, all our existing content is inside a main node, we can define a Portal inside:
<main>
...
<Portal>
<div>popup content</div>
</Portal>
</main>By writing the code the old way, we can display a popup content while moving the new elements outside of the main. Savvy as it is, the most important is to know we have two layouts to manage from now on, one with the main and one with the Portal.
Backdrop
The world is easy to understand conceptually, once the details fill in, it then becomes muddy. In our case, Portal wouldn’t give you any visual cue of popping without some styles. The visual cue is to smoothly move the user’s attention from the current screen to the new popup.
For example, the process involves creating a gray layer to cover the current screen while displaying the popup. One popular way to achieve this is to use a Backdrop component to wrap up the popup providing the animation:
<Portal>
<Backdrop>
<div>popup content</div>
</Backdrop>
</Portal>Under the same Portal, we display the popup content while having a Backdrop. Keep in mind the backdrop can be quite larger than the popup, and normally covering the entire screen. This gives the opportunity for user to click in the area outside of the popup (the gray area).
Popper
Normally designing a widget is all about the layout and the style. However in this case, the position is another subtle matter to address. For example, the tooltip requires us to put the popup in a location relative to an anchor element. You might think this is easy with some CSS trick.
However consider this case, you decide to always pop the tooltip to the top right corner of a button, in case the button is already on the right edge of the screen, it would become difficult to pop it. Insisting of doing that would only cause a cut-off issue. This is where the Popper comes to rescue:
<Popper>
<Anchor>Button</Anchor>
<Portal>
<div>popup content</div>
</Portal>
</Popper>The above Popper will talk between the anchor element, such as a button, and the popup content so to help find a “good” pop-able location against the anchor element. For example, if the suggested location is not available to pop, it can find the next best location, such as the top-left of the button if the button happens to be on the right edge. This does sound pretty magical, but is exactly what Popper does.
Wrap up
We have gone over three features Portal , Backdrop and Popper so far, if you can put them together, you will end up with a real widget such as a Modal , or a Tooltip . However the complexities don’t stop here. Considering to build a form popup to ask user a question, the user has a choice to dismiss the popup by hitting Esc button, or navigate between each form input by hitting Tab button. Clicking outside of a modal also allows the user to dismiss it. All these are out of the scope of this article, but they form the basic requirements for what’s becoming a Modal component.
