Modals: multistep

Multistep templates consist of two or more screens. Usually, a user navigates between them using buttons or links.

The most common example of a multistep template is adblocker intercept, where, on the first screen, a user chooses either to subscribe or to turn off their adblocker extension. In the latter case, on the second screen, a user needs to select the extension they are using. And on the third screen, they see an instruction on how to turn off the selected adblocker.

Another example is showing a list of 3 main offers on the first screen and some additional options on the second.

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

Turning a regular modal into multistep

When considering the implementation of a multistep modal, one could think of using multiple separate modal templates. However, we recommend including all screens in one template and handling them using simple Javscript. It will work faster with no delay between loading different modals; also, it's easier to implement. Basically, all we need to do is show or hide screens on click (or any other event).

An example of code can be borrowed from the demo template code.

Setting up a modal

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

Specifying the 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.

Customizing a 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 can 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.