Modal Dialog

The <ch5-modal-dialog> component is a special-case instance of an overlay panel that is used primarily to display dialog boxes and user prompts. Modal dialogs can contain an optional header bar with a title, an optional message and icon, and optional "OK" and "Cancel" buttons.

For interactive examples using the <ch5-modal-dialog> component and CSS classes, refer to the Showcase Application.

Features

The <ch5-modal-dialog> attributes provide the following features:

  • Sets whether the dialog hides automatically if a touch event occurs outside of it.
  • Sets a class name of the close icon (can be a Font Awesome class).
  • Applies a background mask if needed and sets an optional inline style for the mask.
  • Sets values to determine whether and how the modal dialog stretches in relation to its parent component.
  • Sets values to determine how content is displayed when it overflows the modal dialog.
  • Sets the height and width of the container.
  • Positions the modal dialog in relation to a window or element by ID and positions the dialog offset to the event element's position automatically.
  • Sets whether an "OK" button is displayed and controls the text, icon, and style.
  • Sets whether a "Cancel" button is displayed and controls the text, icon, and style.
  • Sets an optional message prompt and related icon.
  • Receives common attributes, modal dialog descriptions, and modal dialog position signals from control system state.
  • Sends signals to the control system after hiding and showing the modal dialog.
  • Sends signals to the control system after feedback by tapping "OK" and "Cancel" buttons.

Design Considerations

When using multiple <ch5-triggerview-child> subcomponents within a <ch5-modal-dialog> component, all TriggerView children will be displayed (instead of one at a time) if not all application resources have been downloaded first.

To prevent this, use the load event from the window as shown in the following example code:

Copy 
const overlay = document.createElement('div');
overlay.className = 'overlay';

document.body.appendChild(overlay);

window.addEventListener('load', () => {
    overlay.remove();>
})

When <ch5-modal-dialog> and <ch5-overlay-panel> components are used in Angular templates, the modal dialog or overlay panel will not appear in the UI when triggered unless the relevant code is added to index.html above <app-root></app-root>.

Refer to the following sample code:

Copy 
<body>
    <ch5-overlay-panel receiveStateShowPulse="trigger_1" closable>
        <p>Sample text</p>
        <ch5-image id="ex1-img" url="https://yourimagelocation.com/1/">
        </ch5-image>
    </ch5-overlay-panel>
    <ch5-modal-dialog receiveStateShowPulse="trigger_3" closable>
        <p>Sample text</p>
        <ch5-image id="ex1-img" url="https://yourimagelocation.com/2/">
        </ch5-image>
    </ch5-modal dialog>
    <app-root>
        <div id="loader"></div>
    </app-root>
</body>

The <ch5-modal-dialog> component can be used outside of the <ch5-triggerview> component by placing it at the bottom of the app.component.html file. The dialog can then be triggered from any location in the project.

Refer to the following sample code:

Copy 
<section class="main-selection">
    <app-header (valueChange)="getHeaderEvent($event)"></app-header>
    <ch5-triggerview class="main-swiper" [attr.activeView]="activeIndex" gesturable="true" endless = "false">
        ....
    </ch5-triggerview>
    ...
</section>

<!-- All CH5 modal dialogs -->
<ch5-modal-dialog receiveStateShowPulse="trigger_1"><p>Sample text</p></ch5-modal-dialog>
<ch5-modal-dialog receiveStateShowPulse="trigger_2"><p>Sample text</p></ch5-modal-dialog>
<ch5-modal-dialog receiveStateShowPulse="trigger_3"><p>Sample text</p></ch5-modal-dialog>