# How to create a modal dialog

**URL:** https://community.stadium.software/community/t/how-to-create-a-modal-dialog/114
**Category:** How To
**Created:** [July 20, 2021, 9:43am UTC](https://community.stadium.software/community/t/how-to-create-a-modal-dialog/114 "2021-07-20T09:43:44Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![anton.platzoeder](https://community.stadium.software/community/user_avatar/community.stadium.software/anton.platzoeder/32/17_2.png) [@anton.platzoeder](https://community.stadium.software/community/u/anton.platzoeder)
#### Post date: [July 20, 2021, 9:43am UTC](https://community.stadium.software/community/t/how-to-create-a-modal-dialog/114/1 "2021-07-20T09:43:45Z")

</div>

Shaun Ting, the lead dev of Stadium, created a very impressive Stadium application listing users from [https://randomuser.me](https://randomuser.me). Clicking a user displayed detailed information about that user in a modal dialog. A screenshot of the end result can be seen below.

 ![2021-07-19_12h02_47](https://community.stadium.software/community/uploads/default/original/1X/4a9610c8f717b88967590697a575549ff19ef283.jpeg)

In this post, I rebuilt a basic example to show you how to use the same modal dialog in your Stadium applications. Here is what he did:

1. Drag on a Container onto the StartPage and name it _ModalDialog_.
2. Right-click on _ModalDialog_ and click Style in the context menu. In the freetext css section on the right, paste the following css:

```auto
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

```

1. Drag a Flexbox into ModalDialog and name it _ModalContent_. Set the following properties:
  - Inline → uncheck this property
  - Direction → Column (_Optional: Doing this will simply place your controls vertically inside of the modal dialog instead of horizontally.)_

2. Right-click on the _ModalContent_ and click Style in the context menu. In the freetext css section, paste:

```auto
background-color: #E5E5E5;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
align-items: center;
justify-content: center;
width: fit-content;

```

1. Add a Label into _ModalContent_ to visually indicate where the content goes and a Button to close the modal dialog. Create a Click EventHandler for the close button. Drag in a JavaScript action and set the Code to:

```auto
var modal = document.getElementById('StartPage_ModalDialog-container');
modal.style.display = "none";

```

1. Lets move on to opening the modal dialog. Add a Button to the StartPage immediately above the _ModalDialog_ and set the Text to _Open the modal dialog_. Also create the Click EventHandler and drag a JavaScript action into it. Set the JavaScript Code property to:

```auto
var modal = document.getElementById('StartPage_ModalDialog-container');
modal.style.display = "block";

```

1. That’s it. Preview the app and click the _Open the modal dialog_ button.

I attached the sample application to this post for further reference.

[ModalDialog.sapz](https://community.stadium.software/community/uploads/short-url/50AVKyPfD8yIxskZWPKt5e21Upi.sapz) (7.3 KB)

Thank you to Shaun who built the app. The modal dialog he used was based upon the one he found at [How To Make a Modal Box With CSS and JavaScript](https://www.w3schools.com/howto/howto_css_modals.asp)