Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. You can select an item from the list of choices and it will be selected upon 'OK'.
{{ selected }} selected from modal.
Modals can be invoked through a combination of a template definition and some Javascript Code. Check it out!
<script type="text/ng-template" id="demoModalContent.html">
<div class="modal-header">
<h3 class="modal-title">This is a modal!</h3>
</div>
<div class="modal-body">
Modal content goes here
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="close()">Cancel</button>
</div>
</script>
<button class="btn btn-primary" ng-click="openDemoModal('lg')">Open Modal</button>
// inside the controller
$scope.openDemoModal = function (size) {
var modalInstance = $modal.open({
templateUrl: 'demoModalContent.html',
controller: function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
size: size,
});
}
Click the button below to open the demo modal.