Modals: dismissible

Dismissible modals are the ones with a Close button. It means that a user is able to dismiss a pop-up blocking the content and continue reading without signing in/up or subscribing.

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

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

Specifying the modal size

The modal width is set with 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 would also be 375px.

Customizing the Close button

There're 2 options of the Close button in modals: Piano's default button and a custom one. The default Close button overflows the modal borders and basically is located on your end. All customization should also take place on your end, here is more info on how to provide it.

A custom Close button might be added right to the template code. It can be a minimalistic X or a colorful button saying something like "Go on reading". For it to close the modal, add this attribute to the element code: ng-click="close()".

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.