How do I Create a Modal Dialog?

This lesson demonstrates how to create a modal dialog that blocks other actions until it has been closed. Sample code is provided.

Introduction

While a modal dialog box or window is open, it blocks other actions from the same application. For example, it is not possible to bring another window from the same application to the front until the modal dialog window is closed. Common modal windows are the open file dialog or error notifications.

Creating the Windows

Creating the Windows

In this example we first create the user interface components by using a main stack and a substack.

First create the main stack with the name Modal dialog example and a button with the wording Open Modal Dialog. This button is used to open the modal dialog.

Next create the substack from the File Menu choosing > New substack of "Modal Dialog example" and name it Modal Dialog. This will act as a modal dialog. Add a label with the wording Close modal dialog and a button with the label OK to close the dialog.

Making the Dialog Modal

The following scripts provide the functionality that allows the substack to behave in a modal fashion.

First ensure that the modal dialog can be closed, once it has been opened. Edit the script for the OK button and add the following code:

on mouseUp

close this stack

end mouseUp

Then edit the script for the Open Modal Dialog button and add the following code:

on mouseUp

modal stack "Modal Dialog"

# we could also use the following line:

# go stack "Modal Dialog" as modal

end mouseUp

That is all the code required. Selecting the button Open Modal Dialog opens the new modal window, which retains focus until it is closed by selecting the OK button.

Editing a Modal Substack

The modality of the substack window in this example does not only extend to the main stack but also to the tools in the Tools palette.

In order to edit the substack, change the line:

modal stack "Modal Dialog"

to

toplevel stack "Modal Dialog"

Note: Change the code back after you have finished editing the substack. Alternatively, use the contextual-menu shortcut (Control-Shift-Right-click for Unix and Windows or Command-Control-Shift-click for Mac OS) to display a context menu. Then set the Stack Mode to toplevel to make the substack editable.

0 Comments

Add your comment

E-Mail me when someone replies to this comment