TUTORIAL: How to create a modal in UI Builder
Tags: ux, webdev
Published: 2021-06-01 14:26:31

A modal is a common UI element used to grab the user’s attention by overlaying the page. In this step-by-step tutorial, we will show you how to implement, style, and interact with modals in UI Builder.

Also known as overlays or dialog windows, modals are an easy way to ensure your user receives information or takes an action you want them to take. In order to guarantee the user interacts with the modal, most modals prevent the user from interacting with the underlying page.

While this can be effective in small doses, the modal UI element should be used in moderation as it tends to disrupt the user experience.

Check out an example of the component [in this demo](https://eu.backendlessappcontent.com/8AAA8E74-06F7-48FD-9154-1AA3227BFA24/D8E91033-BD89-40C0-9FD9-126973003E38/files/web/app/index.html?page=Modal).

In this tutorial, we will take you through the process of implementing a modal in Backendless’ built-in UI Builder. To follow along, simply login or create a free Backendless account.

_Note from the author: The names for the classes and elements in this component are used for example. You can them to whatever you prefer._

##Modal Structure In UI Builder
Let’s start assembling the modal window by creating the component structure on the User interface tab.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17prc6wd2s0h27lcf2fu.png)

The general structure of the component is shown below. For clarity, element IDs are named the same as classes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l77si5v3n8fsd6vq1fmj.png)

###Descriptions
*`modal__open` – button for opening a modal window (can be any of your custom solutions)
*`modal` – root element of the modal (required)
  *`modal__card` – root block for your content; inside this element put what you need (required)
    *`modal__close` – button to close the modal window (you can do as you need)
  *`modal__shadow` – shading curtain behind the modal window, restricts access to other elements of the page (required)

All elements of the component, except buttons, use the Block component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ufmyprfls74jouwy4lb.png)

For the buttons, we will use the Button element but you can use whatever you want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6573x11j5zinb28vozu.png)

When creating elements, immediately assign ID and Classes according to this structure:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf1ugo58sv0jqn5vwtia.png)

As a result, you should get something similar to this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nxnmxabe7tb892kvm33.png)

After you create the entire structure of the component, you need to reset all settings for the Block elements. To do this, you need to delete all the selected properties. Later, we will indicate the necessary ones through the styles. The Padding property is set to 0 and then reset in the same way.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4fobw12izj8zys2253o.png)

##Styles
To create styles, switch to the Theme tab. Inside the page, select the Editor tab and then Extensions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj8bhf0h3u5ollslzffu.png)

Now we’ll create Extensions. You can change the names as you like.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0sg145s5mgn5jd2ovyw.png)

Extension `MxModal` is a LESS-mixin in which the basic styles of the component are taken out for ease of multiple use. Edit only if you know what you are doing!

[Learn more about CSS LESS in UI Themes.](https://backendless.com/how-to-add-customized-styles-to-your-app/)
```
.mx-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px !important;

    &.open {
        display: flex !important;
    }

    @media (min-width: 768px) {
        padding: 0 !important;
    }
}

.mx-modal__curtain {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: -1 !important;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100% !important;
    height: 100% !important;
}
.mx-modal__card {
    width: 100% !important;

    @media (min-width: 768px) {
        width: 600px !important;
    }
}
```
The Extension `Modal` contains the general styling of the component on the page according to your project. The most important thing is to import mixins; any other properties can be adjusted as you like.
```
.modal__open {
    width: 200px !important;
}
.modal {
    .mx-modal();
}
.modal__card {
    .mx-modal__card();

    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    background-color: #fff;
    height: 300px !important;
    border-radius: 5px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.20), 
                0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.modal__close {
    width: 200px !important;
}
.modal__shadow {
    .mx-modal__curtain();
}
```
##Logic
Let’s start adding [Codeless logic](https://backendless.com/features/backendless-core/codeless) from the root Page element. To do this, we return to the User interface tab, select the Page element and click on the puzzle icon as in the screenshot.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1wc16unucwgr39k5cpz.png)

In the Logic tab that opens for the Page element, we hang the logic on the On Page Enter event as in the screenshot. This will create a global modal state variable `isOpenModal` for the entire page. We set the value to `false`, which in our logic will define a closed modal window.

If you want to use several different modals, add a unique variable for each window.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asdcr5skejb189bcp4ws.png)

In order not to switch between tabs to select the following items, we will use the navigator. To do this, unpin the Page element by clicking on the button icon.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1bx1vvsh67ljms0tdth.png)

Now we add logic for the rest of the elements.

On the window open button, use the On Click Event. Set the `isOpenModal` variable to `true`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwg9972xo61mb1ukf7x9.png)

Similarly, add a handler for the On Click Event for the close button and shade curtain.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqiw1lflv05dydwvuhde.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bfokpz5k4nsv5d415us.png)

Now, all that remains is to add logic to the element with the `modal` class. For this, we use the Class List Logic event. Here, depending on the value of the `isOpenModal` variable, the open class is added or removed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3ef145r1lo0y33m1la0.png)

That’s all there is to it! We hope that you found this useful and, as always, happy codeless coding!