Search code examples
javascriptangularjsangularjs-directiveangular-ui-bootstrapangular-bootstrap

How to remove the class from angular-bootstrap modal

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?

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