How to Add Pop-Up Info Boxes to Your Website


While pictures are worth a thousand words, those words might not be enough on your website to explain a particular topic relevant to your website.

How to Add Pop-Up Info Boxes to Your Website

Your content team can sometimes find that more information is needed on an image element to improve clarity about your website's topic. 

This is where pop-ups come in handy. Pop-up elements indicate to your web visitors the presence of more information. Unlike other content elements, pop-ups are only triggered by users. This gives them the freedom to read or hide whatever information they'd like to see. Pop-up boxes also boost UX and engagement with your website -- offering your visitors more opportunity to click around and explore more. 

Here's how to add these helpful pop-up boxes to your website: 

HTML

The HTML uses Bootstrap 4's popper.js data attributes .

CSS

The CSS here styles and positions the buttons and the popups.

JS

The JS simply initializes the popover and uses it's options to allow it to close on click.

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.