Control
  
>
  

Modal

System for handling open and close Modals. The Modals are styled after a specific color and size.

Syntax

[modal]-[sm|md|lg|xl]-[default|primary|disabled|success|danger|warning|info|safe|light|dark]

<div class="modal-lg-safe">...</div>

To open a Modal you need to configure a button, link or whatever you prefer. The element must have class name "show-modal" and the ID of the Modal element must be defined in "data-modal-id".

<input type="button" class="show-modal" data-modal-id="modal1" value="Open" /> <div id="modal1" class="modal-lg-primary">My Modal</div>
Result:

To hide a modal configure a element that has the class name "close-modal". Modal ID is not required for hiding.

<a href="#" class="show-modal" data-modal-id="modal2">Open Modal</a> <div id="modal2" class="modal-md-info"> <div class="header flex-center-end"> <a href="#" class="close-modal color-danger bold">[X]</a> </div> </div>
Result:
Open Modal

You can respond to JavaScript events when opening and closing the modal.

$("#modalId").on("modal:show", function (event, data) { .... });
$("#modalId").on("modal:close", function (event) { .... });

Samples

<input type="button" class="btn-safe show-modal" value="Open Modal" data-modal-id="sampleModal" /> <div id="sampleModal" class="modal-md-safe"> <div class="header"> <span class="label">My Modal</span> <a href="#" class="close-modal font-b-sm">[X]</a> </div> <body> Modal Body </body> </div>
Result:


stage: in the making