Modal Dialogs
The modal dialog can be launched on any Legacy Content Delivery page. It provides a way to present a secondary interface without leaving the primary interface. It appears as a popup, and puts a transparent black layer over the primary interface. The modal contains HTML content, and therefore can be used for a variety of tasks.
The modal dialog is universally available in JavaScript. From within any JavaScript, use one of the two following functions:
| Action | Function |
|---|---|
| Open the modal | |
| Close the modal | |
The options argument is a JavaScript object. You can dynamically create that object as the function is called, using the following technique:
CVPortal.components.lcModal.createModal( { opt1: "value", opt2: "value2" });
The createModal function accepts the following properties in the options object:
| Name | Description |
|---|---|
height | Height of the modal dialog, in px. For example, 200px |
width | Width of the modal dialog, in px. For example, 400px |
title | Key of a language resource to load and use as the modal dialog's title. For example, user.properties |
forced | Controls the appearance of a close button. If forced equals 1, then no close button shows on the dialog, requiring the user to complete some other task in the dialog before it closes. If force is not provided, or is set to 0, then a close button shows within the modal, giving a way to cancel the task. |
url | Points to the content to load into the modal dialog. This URL is fetched using a synchronous AJAX GET request. For example, ui.xql?action=html&resource=password.html |
For example, to invoke the modal:
CVPortal.components.lcModal.createModal( {
Height: "500px",
Width: "500px",
url: "ui.xql?action=html&resource=password.html"
title: "change.password"
});
Legacy Content Delivery supports modal dialogs of two depths. From one dialog, you can load a second modal dialog. When the second is closed, the first is displayed again. During this process, the content of the first is maintained and not reloaded. The Merge / Sync Language modal dialogs are an example of this use case.
All of the same functions for the second modal dialog are available, but their function names have a numeral 2 appended. Therefore, you can use createModal2 and close2 in the same way that you use createModal and close.
The modal2 should not be opened if the first modal dialog is not open.