Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Modal contains title, content and footer
<button type="button" class="btn btn-success"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog
You can add extra class to color your modal window avalible class (hmodal-info, hmodal-warning, hmodal-success, hmodal-danger)
var modalInstance = $modal.open({
templateUrl: 'views/modal/modal_example2.html',
controller: ModalInstanceCtrl,
windowClass: "hmodal-success"
});
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false |
This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself. If a remote URL is provided, content will be loaded one time via jQuery's Copy |