Modals: non-dismissible

Non-dismissible modals are hard-blocking templates without a Close button. They overlap the whole content preventing a user from further reading. A user thus cannot dismiss the pop-up until they sign in/up, subscribe, or, for example, disable their ad blocker.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a modal

There're 2 ways to set up a modal: on your end or in Composer.

Specifying a modal size

Modal width is set in a special tag, <config>, which should be added to the very top of the template code. In particular, you want to add a line like this
<config width="600"></config>
where "600" is the modal width measured in pixels. You can set any amount here. Please keep in mind that for more narrow screens (here, for screens which are 600px wide and less) the template will take 100% of the screen. So, for example, on a regular smartphone with a screen width of 375px the template width will also be 375px.

Changing the backdrop color

Backdrop is located on your end, therefore all changes in CSS should be done in your CSS files as well. Here is the documentation on how to change the backdrop color.

About the position of a modal on the page

A modal is centered horizontally on the page (or takes 100% of its width, on narrow screens). Vertically, it's located 50px below the page top. It results from years of QA. Our CSS should be universal and work on 100% websites, browsers, and devices. We strongly recommend not breaking into it. What can be updated in the modal position is its top margin. The horizontal position and the code responsible for it should not be changed.