Modals: alternative shape

A template is rectangular by default, just like any other element on the web. But there might be cases when you need another shape, such as circle or polygon. Or you might want to simply have rounded corners, a very common case. With our templates you should know a couple of nuances, easy ones but still, we thought it would be a good thing to keep them written in the guidelines.

On the demo page below, you may take a look at our example of an unusually shaped template.

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

Reshaping a modal

To give your modal a new shape (other than rectangle or square), you need to do 3 things:

  1. Configure the shape of the template itself; for example, set the outer container's border-radius to 10px (find guides on how to create different shapes with CSS here).
  2. Turn off the background of all ancestors, i.e. change it from the default white to transparent, so that the shape you create can get visible. Add this code to the template CSS tab:
    body { background-color: rgba(255, 255, 255, 0); }
  3. Remove the default shadow on Piano's iframe wrapper by putting this code sample to the CSS on your end:
    .tp-iframe-wrapper.tp-active { box-shadow: none; }

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 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 will 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 the following attribute to the element code: ng-click="close()".

Changing the backdrop color

Backdrop is located on your end, so 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.