A modal window, otherwise known as a lightbox or overlay or dialog window, is an element that sits on top of an application’s main window. It creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application.  — Wikipedia

Modals can be used for a variety of different functions. Perhaps you want to get your user's attention without navigating them away from their current task or maybe you need more information from the user.  For this example, we'll go over how to use a modal window to show the user more information in context of their current task.  

We'll use the SimBank tutorial project to demonstrate how to create a modal window to display the terms and conditions when a user is setting up a new account. 

[Click here to review the completed tutorial project in Player]

In the SimBank project, navigate to the Account Setup screen.  On click of the terms & conditions text, we want to display a modal window with the full terms and conditions for setting up a SimBank account.  

We'll use a Lightbox Overlay widget from the Basic Widgets library to create the modal window. We want the modal window to sit on top of the Account Setup screen, so first, let's ensure that Drag mode is set to Drop Over. 

Next, we'll drag the Lightbox Overlay Dark widget from the Basic Widgets library on to the Account Setup screen. There's also a light version of the Lightbox Overlay widget available. 

When you drag the Lightbox Overlay Dark widget onto the screen, you'll see that it resizes to cover the entire screen.  The width and height values for the library widget are set to 100% to accommodate any screen dimensions.

Now that you have created the Lightbox Overlay widget, you can start designing your interface. However, before creating any new widgets, remember to set drag mode back to Drop Into. 

For this example, in the Lightbox Overlay, we added a grey section for the SimBank Terms & Conditions window.  Within the grey section, we created a text widget for the Terms & Conditions header, a X to close the window, and a scrolling section containing a text widget with placeholder Lorem ipsum text for the actual terms and conditions. 

After designing the interface, we'll add the functionality to display the Terms & Conditions by adding a Show action to display the Lightbox Overlay Widget from the Account Setup screen. 

First, hide the Lightbox Overlay widget in order to access the rest of the screen. You can do this by unchecking the box by the Lightbox Overlay widget in the Outline Panel. 

Tip: Add [Hidden] to the name of the Lightbox Overlay widget to remind yourself of  the default state of the widget.

Next, add a Show widgets action to the terms & conditions text widget and select the Lightbox Overlay widget by clicking the Select widgets button under Target widgets, and clicking the Lightbox Overlay widget from the Outline Panel. 

Click Play to review your prototype.  On click of the terms & conditions text, the Lightbox Overlay widget with the Terms & Conditions placeholder text should open up over the Account Setup screen.  On click of the X icon, the Lightbox Overlay should close and the Account Setup screen should be active once again.

If you have any questions, feel free to contact us at support@irise.com or check out the support portal at support.irise.com. You can also reach a member of support by using the 'Chat with us' button at the top right of your Definition Center interface.