using bootstrap for modal loading dialog

wise-editor/src/main/webapp/js/editor.js

@@ -145,7 +145,6 @@ editor = {};
 editor.WaitDialog = new Class({
     initialize:function () {
         this.panel = this._buildPanel();
-        this.mask = $('#mask');
 //        this.parent({
 //                closeButton:false,
 //                destroyOnClose:true,
@@ -192,43 +191,20 @@ editor.WaitDialog = new Class({
     },
 
     _buildPanel:function () {
-        var image = $('<img src="images/ajax-loader.gif">');
-        image.css('margin-top', '25px');
-        var result = $('<div></div>')
-            .css({
-                'text-align': 'center',
-                'width': '400px',
-                'height': '120px',
-                'z-index': '9999',
-                'position': 'absolute',
-                'background-color': 'white',
-                'border-radius': '4px',
-                'border': '1px solid rgb(255, 163, 0)'
-            });
-
-        result.append(image);
-
-        var winH = $(document).height();
-        var winW = $(document).width();
-
+        var result = $('#load');
+        var content = result.find('.modal-content');
+        var winH = $(window).height();
         //Set the popup window to center
-        result.css('top',  winH/2 - result.height()/2);
-        result.css('left', winW/2 - result.width()/2);
+        content.css('margin-top',  winH/2 - content.height()/2);
         return result;
     },
 
     show:function () {
-        //Set height and width to mask to fill up the whole screen
-        this.mask.css({'width': $(window).width(), 'height': $(window).height()});
-        this.mask.fadeIn('slow');
-        this.mask.fadeTo("slow",0.8);
-        $(document.body).append(this.panel);
-        this.panel.fadeIn('slow');
+        this.panel.modal();
     },
 
     close: function() {
-        this.panel.fadeOut('slow');
-        this.mask.hide();
+        this.panel.hide();
     }
 });