angular-fancy-modal
angular-fancy-modal copied to clipboard
Modal width
Hi,
I have used openingClass to specify a smaller width for the modal. That works. However while modal is closing, it is animated. This fade out/disappear still starts with the default width of 100%.
I tried using the css class for openingClass and closingClass. This causes the modal not to close at all.
Any ideas?
Thank you!
Sorry if this is a bit late but I figured it out:
You have to also use closingClass to specify a smaller witdth for the modal. Then you also have to include the animation so that it actually fades out when you close it.
Example (I just placed this inside the angular-fancy-modal.css file:
.mini-modal-open {
position: fixed;
top: 50px;
width: 70%;
-webkit-animation: fancymodal-in 0.5s;
animation: fancymodal-in 0.5s;
}
.mini-modal-close {
width: 70%;
-webkit-animation: fancymodal-out 0.5s;
animation: fancymodal-out 0.5s;
}
Then use them in your controllers:
$fancyModal.open({
templateUrl: '/public/views/modal.html',
scope: $scope,
openingClass: "mini-modal-open",
closingClass: "mini-modal-close",
controller: function($scope, $window){