Modal Box Element

Dittofi has developed an off the shelf modal box and button that can help you achieve modal functionality like the one shown below.

In this article you're going to learn how to:

Add a modal box
Modal box structure
Show and hide your modal box
Modal button
Open modal to right and left
Close modal box on button click

To add a modal box, drag the modal box onto the page from the elements panel on the left, as shown below.

Notice two things. First the modal box will open immediately and second, the model box will inherit the styles from the parent component. So the text color, alignment and typography might look slightly different depending on where you drop the element.

The modal box is built out of a modal header, modal body and modal footer.

If you click on each of these, you'll see that there is a different breadcrumb trail associated with each.

This contains a Header and icon element. The modal header breadcrumb trail is shown below.

This contains a Div Block elements that contain Labels and Text Input elements. The Modal Body breadcrumb is shown below.

This contains a Button element. The Modal Footer breadcrumb trail is shown below.

You might have noticed that the modal wrapper element and modal element are parent elements to the modal header, body and footer elements. The modal element is the ultimate parent element. Selecting this gives you access to the modal properties that we will cover in more detail below. The modal wrapper meanwhile gives the faded out effect. This can be selected and styled in the usual way using the styles panel.

Lastly, you can add any element from the components panel to your model box either inside the header, body or footer. For example, you might want to add a paragraph element and write a description of why the modal box is displaying or maybe an image with a note inside it, like the one below.

You can show and hide your modal box from within the designer using the modal box properties. To access the modal box properties, click on one of the elements in your modal box and then step back up the breadcrumb trail until you read the element called "Modal".

Once you have the Modal element selected you can open up the Modal properties panel on the right hand side of the screen. This will give you a list of options that you can apply. These are shown below.

To Show or Hide your modal box, you can set the Preview dropdown to either Show or Hide, as below.

When you hide the modal box you'll notice that the modal box comes with a default button selection. This is a special kind of button that has been preconfigured to trigger the modal popup when clicked.

Note, once the model box is hidden, the easiest way to find show this again is to click on the modal button element and then use the breadcrumb trail to locate the model element and its properties.

There are three default display options in the modal properties panel: modal, open right and open left. You can use these options to choose if you want to display your model as a modal or as a slide out from either the right or the left.

To close the modal button on click, you need to (A) create a variable of type checkbox, (B) create a workflow that will set the variable to false on click and (C) bind the variable to the "Show" option in the modal properties panel.