Add option 'animate' for fading effect control.

Note: Sorry guys, the new files are compressed by YUI compressor because I don't have gulp installed on this computer.

dist/css/bootstrap-dialog.css

@@ -1,120 +1,120 @@
 .bootstrap-dialog {
-  /* dialog types */
-  /* dialog sizes */
-  /**
-     * Icon animation
-     * Copied from font-awesome: http://fontawesome.io/
-     **/
-  /** End of icon animation **/
+
 }
 .bootstrap-dialog .modal-header {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 }
 .bootstrap-dialog .bootstrap-dialog-title {
-  color: #fff;
-  display: inline-block;
+    color: #fff;
+    display: inline-block;
 }
-.bootstrap-dialog .bootstrap-dialog-button-icon {
-  margin-right: 3px;
+.bootstrap-dialog.type-default .bootstrap-dialog-title {
+    color: #333;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-title {
+    font-size: 16px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-title {
+    font-size: 24px;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button {
-  float: right;
-  filter: alpha(opacity=90);
-  -moz-opacity: 0.9;
-  -khtml-opacity: 0.9;
-  opacity: 0.9;
+    float: right;
+    filter:alpha(opacity=90);
+    -moz-opacity:0.9;
+    -khtml-opacity: 0.9;
+    opacity: 0.9;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
+    font-size: 20px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
+    font-size: 30px;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button:hover {
-  cursor: pointer;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  -khtml-opacity: 1;
-  opacity: 1;
+    cursor: pointer;
+    filter: alpha(opacity=100);
+    -moz-opacity: 1;
+    -khtml-opacity: 1;
+    opacity: 1;
 }
-.bootstrap-dialog.type-default .modal-header {
-  background-color: #fff;
+.bootstrap-dialog.size-normal .bootstrap-dialog-message {
+    font-size: 14px;
 }
-.bootstrap-dialog.type-default .bootstrap-dialog-title {
-  color: #333;
+.bootstrap-dialog.size-large .bootstrap-dialog-message {
+    font-size: 18px;
+}
+.bootstrap-dialog.type-default .modal-header {
+    background-color: #fff;
 }
 .bootstrap-dialog.type-info .modal-header {
-  background-color: #5bc0de;
+    background-color: #5bc0de;
 }
 .bootstrap-dialog.type-primary .modal-header {
-  background-color: #428bca;
+    background-color: #428bca;
 }
 .bootstrap-dialog.type-success .modal-header {
-  background-color: #5cb85c;
+    background-color: #5cb85c;
 }
 .bootstrap-dialog.type-warning .modal-header {
-  background-color: #f0ad4e;
+    background-color: #f0ad4e;
 }
 .bootstrap-dialog.type-danger .modal-header {
-  background-color: #d9534f;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-title {
-  font-size: 16px;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
-  font-size: 20px;
+    background-color: #d9534f;
 }
-.bootstrap-dialog.size-normal .bootstrap-dialog-message {
-  font-size: 14px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-title {
-  font-size: 24px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
-  font-size: 30px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-message {
-  font-size: 18px;
-}
-.bootstrap-dialog .icon-spin {
-  display: inline-block;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
+.bootstrap-dialog .bootstrap-dialog-button-icon {
+    margin-right: 3px;
+}
+
+/**
+ * Icon animation
+ * Copied from font-awesome: http://fontawesome.io/
+ **/
+.icon-spin {
+    display: inline-block;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    -webkit-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
 }
 @-moz-keyframes spin {
-  0% {
+    0% {
     -moz-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -moz-transform: rotate(359deg);
-  }
+}
 }
 @-webkit-keyframes spin {
-  0% {
+    0% {
     -webkit-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -webkit-transform: rotate(359deg);
-  }
+}
 }
 @-o-keyframes spin {
-  0% {
+    0% {
     -o-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -o-transform: rotate(359deg);
-  }
+}
 }
 @-ms-keyframes spin {
-  0% {
+    0% {
     -ms-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -ms-transform: rotate(359deg);
-  }
+}
 }
 @keyframes spin {
-  0% {
+    0% {
     transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     transform: rotate(359deg);
-  }
 }
+}
+/** End of icon animation **/

dist/js/bootstrap-dialog.js

@@ -25,8 +25,8 @@
             return factory($);
         });
     } else {
-      // planted over the root!
-      root.BootstrapDialog = factory(root.jQuery);
+        // planted over the root!
+        root.BootstrapDialog = factory(root.jQuery);
     }
 
 }(this, function($) {
@@ -102,7 +102,8 @@
         closeByKeyboard: true,
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
-        draggable: false
+        draggable: false,
+        animate: true
     };
 
     /**
@@ -157,7 +158,7 @@
             return this;
         },
         createModal: function() {
-            var $modal = $('<div class="modal fade" tabindex="-1"></div>');
+            var $modal = $('<div class="modal" tabindex="-1"></div>');
             $modal.prop('id', this.getId());
 
             return $modal;
@@ -344,6 +345,21 @@
         canCloseByKeyboard: function() {
             return this.options.closeByKeyboard;
         },
+        isAnimate: function() {
+            return this.options.animate;
+        },
+        setAnimate: function(animate) {
+            this.options.animate = animate;
+
+            return this;
+        },
+        updateAnimate: function() {
+            if (this.isRealized()) {
+                this.getModal().toggleClass('fade', this.isAnimate());
+            }
+
+            return this;
+        },
         getSpinicon: function() {
             return this.options.spinicon;
         },
@@ -789,6 +805,7 @@
             this.updateTitle();
             this.updateMessage();
             this.updateClosable();
+            this.updateAnimate();
 
             return this;
         },
@@ -920,6 +937,6 @@
         }).open();
     };
 
-                return BootstrapDialog;
+    return BootstrapDialog;
 
 }));

examples/assets/bootstrap-dialog/css/bootstrap-dialog.css

@@ -1,120 +1,120 @@
 .bootstrap-dialog {
-  /* dialog types */
-  /* dialog sizes */
-  /**
-     * Icon animation
-     * Copied from font-awesome: http://fontawesome.io/
-     **/
-  /** End of icon animation **/
+
 }
 .bootstrap-dialog .modal-header {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 }
 .bootstrap-dialog .bootstrap-dialog-title {
-  color: #fff;
-  display: inline-block;
+    color: #fff;
+    display: inline-block;
 }
-.bootstrap-dialog .bootstrap-dialog-button-icon {
-  margin-right: 3px;
+.bootstrap-dialog.type-default .bootstrap-dialog-title {
+    color: #333;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-title {
+    font-size: 16px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-title {
+    font-size: 24px;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button {
-  float: right;
-  filter: alpha(opacity=90);
-  -moz-opacity: 0.9;
-  -khtml-opacity: 0.9;
-  opacity: 0.9;
+    float: right;
+    filter:alpha(opacity=90);
+    -moz-opacity:0.9;
+    -khtml-opacity: 0.9;
+    opacity: 0.9;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
+    font-size: 20px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
+    font-size: 30px;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button:hover {
-  cursor: pointer;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  -khtml-opacity: 1;
-  opacity: 1;
+    cursor: pointer;
+    filter: alpha(opacity=100);
+    -moz-opacity: 1;
+    -khtml-opacity: 1;
+    opacity: 1;
 }
-.bootstrap-dialog.type-default .modal-header {
-  background-color: #fff;
+.bootstrap-dialog.size-normal .bootstrap-dialog-message {
+    font-size: 14px;
 }
-.bootstrap-dialog.type-default .bootstrap-dialog-title {
-  color: #333;
+.bootstrap-dialog.size-large .bootstrap-dialog-message {
+    font-size: 18px;
+}
+.bootstrap-dialog.type-default .modal-header {
+    background-color: #fff;
 }
 .bootstrap-dialog.type-info .modal-header {
-  background-color: #5bc0de;
+    background-color: #5bc0de;
 }
 .bootstrap-dialog.type-primary .modal-header {
-  background-color: #428bca;
+    background-color: #428bca;
 }
 .bootstrap-dialog.type-success .modal-header {
-  background-color: #5cb85c;
+    background-color: #5cb85c;
 }
 .bootstrap-dialog.type-warning .modal-header {
-  background-color: #f0ad4e;
+    background-color: #f0ad4e;
 }
 .bootstrap-dialog.type-danger .modal-header {
-  background-color: #d9534f;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-title {
-  font-size: 16px;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
-  font-size: 20px;
+    background-color: #d9534f;
 }
-.bootstrap-dialog.size-normal .bootstrap-dialog-message {
-  font-size: 14px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-title {
-  font-size: 24px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
-  font-size: 30px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-message {
-  font-size: 18px;
-}
-.bootstrap-dialog .icon-spin {
-  display: inline-block;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
+.bootstrap-dialog .bootstrap-dialog-button-icon {
+    margin-right: 3px;
+}
+
+/**
+ * Icon animation
+ * Copied from font-awesome: http://fontawesome.io/
+ **/
+.icon-spin {
+    display: inline-block;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    -webkit-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
 }
 @-moz-keyframes spin {
-  0% {
+    0% {
     -moz-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -moz-transform: rotate(359deg);
-  }
+}
 }
 @-webkit-keyframes spin {
-  0% {
+    0% {
     -webkit-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -webkit-transform: rotate(359deg);
-  }
+}
 }
 @-o-keyframes spin {
-  0% {
+    0% {
     -o-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -o-transform: rotate(359deg);
-  }
+}
 }
 @-ms-keyframes spin {
-  0% {
+    0% {
     -ms-transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     -ms-transform: rotate(359deg);
-  }
+}
 }
 @keyframes spin {
-  0% {
+    0% {
     transform: rotate(0deg);
-  }
-  100% {
+}
+100% {
     transform: rotate(359deg);
-  }
 }
+}
+/** End of icon animation **/

examples/assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -25,8 +25,8 @@
             return factory($);
         });
     } else {
-      // planted over the root!
-      root.BootstrapDialog = factory(root.jQuery);
+        // planted over the root!
+        root.BootstrapDialog = factory(root.jQuery);
     }
 
 }(this, function($) {
@@ -102,7 +102,8 @@
         closeByKeyboard: true,
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
-        draggable: false
+        draggable: false,
+        animate: true
     };
 
     /**
@@ -157,7 +158,7 @@
             return this;
         },
         createModal: function() {
-            var $modal = $('<div class="modal fade" tabindex="-1"></div>');
+            var $modal = $('<div class="modal" tabindex="-1"></div>');
             $modal.prop('id', this.getId());
 
             return $modal;
@@ -344,6 +345,21 @@
         canCloseByKeyboard: function() {
             return this.options.closeByKeyboard;
         },
+        isAnimate: function() {
+            return this.options.animate;
+        },
+        setAnimate: function(animate) {
+            this.options.animate = animate;
+
+            return this;
+        },
+        updateAnimate: function() {
+            if (this.isRealized()) {
+                this.getModal().toggleClass('fade', this.isAnimate());
+            }
+
+            return this;
+        },
         getSpinicon: function() {
             return this.options.spinicon;
         },
@@ -789,6 +805,7 @@
             this.updateTitle();
             this.updateMessage();
             this.updateClosable();
+            this.updateAnimate();
 
             return this;
         },
@@ -920,6 +937,6 @@
         }).open();
     };
 
-                return BootstrapDialog;
+    return BootstrapDialog;
 
 }));

examples/index.html

@@ -483,6 +483,30 @@
         -->
     </div>
     
+    <a name="dialog-animate"></a>
+    <h3>Disabling Animation</h3>
+    <p>
+        Setting option 'animate' to false to disable animation for the opening dialog. <br />
+        If you want to disable animation globally, try to do this: <br />
+        BootstrapDialog.configDefaultOptions({
+            animate: false
+        });
+    </p>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            message: 'There is no fading effects on this dialog.',
+            animate: false,
+            buttons: [{
+                label: 'Close the dialog',
+                action: function(dialogRef){
+                    dialogRef.close();
+                }
+            }]
+        });
+        -->
+    </div>
+    
     <h3>Auto spinning icon</h3>
     <p>
         Lazy guys must love this.

js/bootstrap-dialog.js

@@ -25,8 +25,8 @@
             return factory($);
         });
     } else {
-      // planted over the root!
-      root.BootstrapDialog = factory(root.jQuery);
+        // planted over the root!
+        root.BootstrapDialog = factory(root.jQuery);
     }
 
 }(this, function($) {
@@ -102,7 +102,8 @@
         closeByKeyboard: true,
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
-        draggable: false
+        draggable: false,
+        animate: true
     };
 
     /**
@@ -157,7 +158,7 @@
             return this;
         },
         createModal: function() {
-            var $modal = $('<div class="modal fade" tabindex="-1"></div>');
+            var $modal = $('<div class="modal" tabindex="-1"></div>');
             $modal.prop('id', this.getId());
 
             return $modal;
@@ -344,6 +345,21 @@
         canCloseByKeyboard: function() {
             return this.options.closeByKeyboard;
         },
+        isAnimate: function() {
+            return this.options.animate;
+        },
+        setAnimate: function(animate) {
+            this.options.animate = animate;
+
+            return this;
+        },
+        updateAnimate: function() {
+            if (this.isRealized()) {
+                this.getModal().toggleClass('fade', this.isAnimate());
+            }
+
+            return this;
+        },
         getSpinicon: function() {
             return this.options.spinicon;
         },
@@ -789,6 +805,7 @@
             this.updateTitle();
             this.updateMessage();
             this.updateClosable();
+            this.updateAnimate();
 
             return this;
         },