diff --git a/README.md b/README.md
index a282c8f..d06c832 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ bower install ember-addons.bs_for_ember --save
 ### Dependencies
 
 * Bootstrap 3 css.
+* Bootstrap 3 js.
 * Fontawesome 4.
 * Ember.js 1.3.1 or higher.
 
diff --git a/app/scripts/components/BsModalComponent.coffee b/app/scripts/components/BsModalComponent.coffee
index 2bd35eb..a1f5d80 100644
--- a/app/scripts/components/BsModalComponent.coffee
+++ b/app/scripts/components/BsModalComponent.coffee
@@ -4,10 +4,21 @@ Modal component.
 Bootstrap.BsModalComponent = Ember.Component.extend(Ember.Evented,
     layoutName: 'components/bs-modal'
     classNames: ['modal']
-    #classNameBindings: ['fade']
-    attributeBindings: ['role', 'aria-labelledby', 'isAriaHidden:aria-hidden', "ariaLabelledBy:aria-labelledby"]
+    classNameBindings:[
+        'fade'
+        'isVisible:in'
+    ]
+
+    attributeBindings:[
+        'role'
+        'aria-labelledby'
+        'isAriaHidden:aria-hidden'
+        'ariaLabelledBy:aria-labelledby'
+        'backdrop:data-backdrop'
+    ]
+    
     isAriaHidden: (->
-        "#{@get('isVisible')}"
+        !"#{@get('isVisible')}"
     ).property('isVisible')
     modalBackdrop: '<div class="modal-backdrop fade in"></div>'
     role: 'dialog'
@@ -32,25 +43,25 @@ Bootstrap.BsModalComponent = Ember.Component.extend(Ember.Evented,
             @show()
 
     becameVisible: ->
-        Em.$('body').addClass('modal-open')
-        @appendBackdrop() if @get("backdrop")
+        # Em.$('body').addClass('modal-open')
+        # @appendBackdrop() if @get("backdrop")
 
     becameHidden: ->
-        Em.$('body').removeClass('modal-open')
-        @_backdrop.remove() if @_backdrop
+        # Em.$('body').removeClass('modal-open')
+        # @_backdrop.remove() if @_backdrop
 
     appendBackdrop: ->
-        parentElement = @$().parent()
-        @_backdrop = Em.$(@modalBackdrop).appendTo(parentElement)
+        # parentElement = @$().parent()
+        # @_backdrop = Em.$(@modalBackdrop).appendTo(parentElement)
 
     show: ->
-        @set 'isVisible', true
+        this.$().modal 'show'
 
     hide: ->
-        @set 'isVisible', false
+        this.$().modal 'hide'
 
     toggle: ->
-        @toggleProperty 'isVisible'
+        this.$().modal 'toggle'
 
     click: (event) ->
         target = event.target
diff --git a/dist/js/bs-modal.max.js b/dist/js/bs-modal.max.js
index 04ae00e..3f6e3c8 100644
--- a/dist/js/bs-modal.max.js
+++ b/dist/js/bs-modal.max.js
@@ -1,15 +1,15 @@
 /*
 Modal component.
-*/
-
+ */
 
 (function() {
   Bootstrap.BsModalComponent = Ember.Component.extend(Ember.Evented, {
     layoutName: 'components/bs-modal',
     classNames: ['modal'],
-    attributeBindings: ['role', 'aria-labelledby', 'isAriaHidden:aria-hidden', "ariaLabelledBy:aria-labelledby"],
+    classNameBindings: ['fade', 'isVisible:in'],
+    attributeBindings: ['role', 'aria-labelledby', 'isAriaHidden:aria-hidden', 'ariaLabelledBy:aria-labelledby', 'backdrop:data-backdrop'],
     isAriaHidden: (function() {
-      return "" + (this.get('isVisible'));
+      return !("" + (this.get('isVisible')));
     }).property('isVisible'),
     modalBackdrop: '<div class="modal-backdrop fade in"></div>',
     role: 'dialog',
@@ -32,29 +32,17 @@ Modal component.
         return this.show();
       }
     },
-    becameVisible: function() {
-      if (this.get("backdrop")) {
-        return this.appendBackdrop();
-      }
-    },
-    becameHidden: function() {
-      if (this._backdrop) {
-        return this._backdrop.remove();
-      }
-    },
-    appendBackdrop: function() {
-      var parentElement;
-      parentElement = this.$().parent();
-      return this._backdrop = Em.$(this.modalBackdrop).appendTo(parentElement);
-    },
+    becameVisible: function() {},
+    becameHidden: function() {},
+    appendBackdrop: function() {},
     show: function() {
-      return this.set('isVisible', true);
+      return this.$().modal('show');
     },
     hide: function() {
-      return this.set('isVisible', false);
+      return this.$().modal('hide');
     },
     toggle: function() {
-      return this.toggleProperty('isVisible');
+      return this.$().modal('toggle');
     },
     click: function(event) {
       var target, targetDismiss;
@@ -79,6 +67,7 @@ Modal component.
     },
     willDestroyElement: function() {
       var name;
+      Em.$('body').removeClass('modal-open');
       this.removeHandlers();
       name = this.get('name');
       if (name == null) {
@@ -93,16 +82,18 @@ Modal component.
       return jQuery(window.document).unbind("keyup", this._keyUpHandler);
     },
     setupBinders: function() {
-      var handler,
-        _this = this;
-      handler = function(event) {
-        return _this.keyPressed(event);
-      };
+      var handler;
+      handler = (function(_this) {
+        return function(event) {
+          return _this.keyPressed(event);
+        };
+      })(this);
       jQuery(window.document).bind("keyup", handler);
       return this._keyUpHandler = handler;
     }
   });
 
+
   /*
   Bootstrap.BsModalComponent = Bootstrap.BsModalComponent.reopenClass(
       build: (options) ->
@@ -111,8 +102,7 @@ Modal component.
           modalPane = @create(options)
           modalPane.append()
   )
-  */
-
+   */
 
   Bootstrap.ModalManager = Ember.Object.create({
     add: function(name, modalInstance) {