Element directive to define the modal dialog. Modal content is transcluded into a modal template
Parameters:
| Name | Type | Description |
|---|---|---|
mac-modal-keyboard |
Boolean | Allow closing modal with keyboard (default false) |
mac-modal-overlay-close |
Boolean | Allow closing modal when clicking on overlay (default false) |
mac-modal-resize |
Boolean | Allow modal to resize on window resize event (default false) |
mac-modal-topOffset |
Integer | Top offset when the modal is larger than window height (default 20) |
mac-modal-open |
Expr | Callback when the modal is opened |
mac-modal-before-show |
Expr | Callback before showing the modal |
mac-modal-after-show |
Expr | Callback when modal is visible with CSS transitions completed |
mac-modal-before-hide |
Expr | Callback before hiding the modal |
mac-modal-after-hide |
Expr | Callback when modal is hidden from the user with CSS transitions completed |
mac-modal-position |
Boolean | Calculate size and position with JS (default true) |
Example
<mac-modal id="test-modal" mac-modal-keyboard ng-cloak>
<div class="mac-modal-content" ng-controller="modalController">
<h1>Just another modal</h1>
</div>
</mac-modal>
<button mac-modal="test-modal">Show Modal</button>