See also .alert
In the end we decided to not use any libraries for popups and coded our own.
Layout of this is just 4 divs.
Better place it in the end of the document.
JS code is ../scripts/_popup.js
We solve two tasks here:
1) Show/hide popup using fadeIn / fadeOut. We use JS functions here to control
timing and callbacks.
2) Lock scrollbar when modal window is show. Calculate its width and
add it as padding-right to <html> together with .scroll-lock class.
In some cases modal window is needed only on smartphones while on desktop it becomes normal, visible part of pages. Contacts form for example. It is being solved with .popup--visible-on-desktop class and on 992+ all styles will be overwritten and scripts won't do any effects.
Here we can't place modal window at the end of the page. So beware of z-index conflicts
(make screen smaller)
In one specific case we have an addition of sticking styles. See it on complex.html.