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.
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:
- Drag on a Container onto the StartPage and name it ModalDialog.
- 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 */
- 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.)
- 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;
var modal = document.getElementById('StartPage_ModalDialog-container'); modal.style.display = "none";
var modal = document.getElementById('StartPage_ModalDialog-container'); modal.style.display = "block";
- 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)