Question

I am using angular-bootstrap modal and trying to remove the slide down effect when it is closed.

I tried to remove 'fade' class like this, but it didn't work.

angular.module('myapp.directives', [])
    .directive 'modalWindow', ()->
        restrict:'EA'
        link:(scope,elem)->
            elem.removeClass("fade")

How can I access or manipulate the DOM created by angular-bootstrap?

Was it helpful?

Solution

Rather than remove the class, you can simply override the css. This is copied from bootstrap.css, but I have removed the transitions responsible for the slide down effect:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
}

Just include your css file after you include bootstrap's css. Here is a demo: http://plnkr.co/edit/MuIR7N51Zxe6dZFKomHq?p=preview

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top