Modal
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.
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>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. |
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 |