The modal component implements the concept of a modal window. Modal windows are used to present information to the user in a new window placed on top of the existing window. Here is an example of a Modal:

If specified, the Close Icon can be used to dismiss the modal. Unless you are creating a Redirecting Modal, the behavior of the left and right buttons are to simply dismiss the modal. Therefore for all other types of modals other than Redirecting, there is no reason to ever have 2 buttons since they will both simply close the Modal. You can have no buttons and just use the Close Icon if that is what your design calls for. Here is another example of a modal:

Here is an example of a Redirecting modal. If the user clicks on I AGREE the modal is closed and they are redirected to the file they originally clicked on. If they click CANCEL the modal is simply closed.

The type of modal generated is based on the Modal Type element. The default is to generate a simple modal.

Button UI: This generates a button for invoking the modal. There is no processing when the modal is dismissed.
Link UI: This generates a link for invoking the modal . There is no processing when the modal is dismissed.
Redirecting: There is no UI generated for this modal. The Redirect Button must also be specified as the leftButton or rightButton. Then after the modal is dismissed using the specified button, the user is redirected to the original link destination. The creator is responsible for adding the class they specified for the Invocation Class element to any <a> elements on the page for which they wish the modal displayed. For example, if the Invocation Class is specified as showModal:

<a class="showModal" href="your_hrf_here">Your Link Text</a> or
<a class="existingClass showModal" href="your_hrf_here">Your Link Text</a>
Simple: There is no UI generated and no processing when the modal is dismissed, The creator is responsible for adding the class they specified for the Invocation Class element to any HTML elements on the page for which they wish the modal displayed. These should not be <a> tags. Typically you would add this class to <div> or <span> or <p> elements. For example, if the Invocation Class is specified as showMsg:

<div class="showMsg">Your Text Here</div> or
<p class="ExistingClass showMsg">Your Text Here</p>

Creation Details

Modal Type: Specify the type of modal desired.

Redirect Button; If the Modal Type is Redirecting you must specify a value for this element. This specifies which button causes the redirect on dismissal of the modal. If the Modal Type is not Redirecting this element is ignored.

Invocation Button or Link Text: If the Modal Type is Button UI or Link UI you must specify a value for this element. If the Modal Type is not Button UI or Link UI this element is ignored.

Invocation Class: This element is required. It simply needs to be unique on this page. (No other modal used on the same page can have the same invocation class.)

Show Close Icon: Select either True or False to specify if the close icon (X) should be available in the upper right corner of the modal, By default this icon is displayed.

Headline: This is an optional field.

Body: This element is required.

Left Button Text: If specified a button with this name is generated in the lower left corner of the modal.

Right Button Text: If specified a button with this name is generated in the lower right corner of the modal.

Usage Scenarios

There are 2 different approaches for including a Modal on a page:

Drag and drop the modal component from the shelf. You can edit a page and add the modal component to a section of the page using drag and drop.
1. Redirecting or Simple: This would be most useful for Redirecting and Simple modals which have no UI. In this case drop the modal component on an unused portion of the web page. Add the value you specified for the Invocation Class element to any HTML elements, (typically a button or anchor tag), on the page you wish to be able to click on to invoke the modal.
2. Button UI or Link UI: For some designs you might have cases where having a button or link modal by itself in a portlet makes sense. If so just drop the modal component where it fits visually into your design.
Create an instance of modal content You can create an instance of modal content in the site area associated with the page you are using it on, or if the modal is used in more than one page you can create it in a site area for shared content.All Modal types: You can add the modal into either a Rich Text Area or an HTML component using the Insert Tag dialog and selecting the modal piece of content.
1. Button UI or Link UI: Add the instance where it should visually appear.
2. Redirecting or Simple: Add the instance at the bottom of the component where you are using it. You must also add the value you specified for the Invocation Class element to any HTML elements, (typically button or anchor tags), on the page you wish to be able to click on to invoke the modal.

Complementary Content

${loading}