Pop-up, modal, and lightbox guidelines

Pop-ups, modals, and lightboxes are all components that appear to pop up, with the rest of the screen faded in the background.

Pop-ups

Pop-ups are components that pop up onto the user’s screen, usually displaying marketing material. This could include discount codes, sign-up calls to action, or even advertising for a sale. Usually, pop-ups will only appear on page load, especially on the landing page. Since they interrupt the user’s journey, it’s best to use them very sparingly.

---

Modals

Modals, like pop-ups, are components that pop up on a user’s screen. The key difference, however, is that the user would have initiated the action as part of their journey. Modals are used for specific workflows such as adding users, deleting content, sharing content, adding content, and more.

---

Lightboxes

A lightbox is a component that pops up on the screen when a user clicks to enlarge an image. Usually, in a gallery view, the pictures aren’t big enough to see all the details, so you can use a lightbox effect to display a single image at a larger size.

---

Controls included in Balsamiq

Balsamiq has a pre-made pop-up background overlay.

Modal screen: The modal screen, or modal screen overlay, is a semi-transparent block that sits in between your pop-up design and the rest of the screen. This helps keep the focus on the pop-up, modal, or lightbox.

---