Modal Dialogs

“A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.“<citation>https://ux.stackexchange.com/questions/12045/what-is-a-modal-dialog-window</citation>

Unibase now has the start of first class support for modal dialogs.

Limitations

The main limitation is that interaction with the rest of the page is not inhibited as it should be to be truly modal. That will come.

Extensions

The standard proposes a new element ‘dialog’ that will be dealt with specially by the browser. Currently this is not supported by the browsers.

Unibase has extended the form content of the modal dialog to be a complete iframe so that scripts etc can be executed.

Implementation

Include one or more elements called ‘ubDialog’. They can have different id’s although typically only one is required. The default id should be ‘dialog’ but can be anything. eg

<ubDialog id="dialog"></ubDialog>

The ubDialog element starts in a hidden state and is displayed when it called. It is displayed centered in the screen and big enough to hold the content of the prompt.

Create a ubprompt.prm to implement your dialog. This will be exactly the same as a normal ubprompt except it will be displayed in the modal dialog frame rather than a separate iframe.

To use the dialog, add onclick=”ubprompt.dialog(<prompt>, <args>, <id>);” or equivalent addEventListener to your page.

<prompt> name of ubprompt script.

<args> URL format arguments needed by prompt script. eg ‘SKU=123&NAME=abc’

<id> optional id if standard ‘dialog’ is not being used.

At the end of your function key script add the following:

<script>parent.ubprompt.dialogClose();</script>

To remove the dialog window from the screen.