To make something pretty, press and hold cmd + alt + shift + w + a + !
Regular Label
Radius Secondary Label
Round Alert Label
Success Label
Example Modal… Example Video Modal…
Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal
. Clicking anywhere outside the modal will also dismiss it.
Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.
×See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.
×The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
It has an easy to override visual style, and is appropriately subdued.
It's a little ostentatious, but useful for important content.