Modal

Description

Modals are windows that blocked the main content to request some data from the user. The framework has some scripts to control this action. There is an example in the Examples page with a functional modal window.

Code Examples

These are some examples for component:

<!-- Button -->
<button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>

<!-- Overlap -->
<div class="tui-overlap"></div>

<!-- Modal window -->
<div id="modal" class="tui-modal">
    <div class="tui-window red-168">
        <fieldset class="tui-fieldset">
            <legend class="red-255 yellow-255-text">Alert</legend>
            ...
            <button class="tui-button tui-modal-close-button right" data-modal="modal">close</button>
        </fieldset>
    </div>
</div>

Attributes

There are two data attributes to create a modal window:

Attribute	Value	Description
data-modal	the id of the modal element	Used in the element that will open/close the modal, like buttons or anchors.

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-modal	Defines that the element will be a modal
.tui-overlap	Creates a layer element to block the content under the modal
.tui-modal-button	Creates a button to open the modal element
.tui-modal-close-button	Creates a button to close the modal element