How to create a modal dialog

How To
1

Shaun Ting, the lead dev of Stadium, created a very impressive Stadium application listing users from 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
2021-07-19_12h02_471920×887 186 KB

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:
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:
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:
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:
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 (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

2 Likes