Modal

github.io page

Important

If you are using a namespaced distribution of lucca-ui, you have to use the appendTo option in the open function to append the modal inside your namespaced, or else it will append to body and lucca-ui's styles wont apply

If you are using a prefixed distribution of lucca-ui, you have to use the windowClass and backdropClass option in the open function to add the prefix to the backdrop and modal window

You can use the lucca-ui adjectives for sizing (see the grid): providing no size will make the modal take 90% of the width

Or you can use the sizes supported by angular-ui-bootstrap:

Open in namespace with prefix
The styles of lucca-ui will be applied to the modal window, inside the modal window and to the background

Open without prefix
Because the prefix is missing for the modal-window or the modal-backdrop, their styles aren't applied. But because the content of the modal is in the namespace, other lucca-ui elements (callout, label) still work

Open without namespace
The modal is appended out off the namespace, as a result none of lucca-ui's styles are applied to the modal, its backdrop or its content

Usage:

// global distribution
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'desktop',
});
// namespaced distribution
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
appendTo: angular.element(document.getElementById("myNamespace")),
size: 'desktop',
});
// prefixed distribution
var modalInstance = $uibModal.open({
backdropClass: 'myPrefix',
windowClass: 'myPrefix',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'desktop',
});