angular-fancy-modal icon indicating copy to clipboard operation
angular-fancy-modal copied to clipboard

Modal width

Open tomcat86 opened this issue 8 years ago • 1 comments

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!

tomcat86 avatar Nov 07 '16 08:11 tomcat86

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){

quangChe avatar Mar 20 '18 21:03 quangChe