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

Add a modal box

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.

Modal box structure

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.

Modal Header

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

Modal Body

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

Modal Footer

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.

Example Modal Box with text and images

Show and hide your modal box

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.

Modal Button

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.

Open modal to right and left

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.

Close modal on button click

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.