design Rules pop-up modal Windows. Their combination and order of appearance.

Form lightbox centered content. The background overlay is clickable, on click the form is closed. A required element of the cross closure (can be disabled if the form cannot be closed).

For light boxes better to use a fixed width for consistency. For example, the shape of the size S = 480px, M = 720px, etc. to Choose the width you need depending on the content of the form. The height depends on content, on your tablet and mobile form adapted to the screen.

Lightbox must not have a scrolling. For long forms you need to use aidpage.


Lightbox - Desktop


Lightbox Tablet


Lightbox - Smartphone

Scrolling lightbox

If the lightbox is not included on the screen, then scrolling should not appear inside the shape. The entire area of the overlay should be scrolled, and scrolling the main page is blocked.

Scrolling lightbox

Combination boxes

Lightboxes are not nested in one another. If you avoid a few of the light boxes cannot, they should overlap each other with the overlay. The scroll (if any) works only at the top of the lightbox, the rest it is locked.

Combination of lightboxes

Combination with aidpages

Lightboxes and midpage