using bootstrap for modal loading dialog

This commit is contained in:
Ezequiel Bergamaschi 2014-03-09 20:50:41 -03:00
parent 2ec17259e8
commit 67ceede236
2 changed files with 13 additions and 39 deletions

View File

@ -36,18 +36,16 @@
}); });
</script> </script>
<style>
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
</style>
</head> </head>
<body> <body>
<div id="mask"></div> <div id='load' class="modal fade">
<div class="modal-dialog">
<div style="height: 120px; text-align: center; border: 2px solid orange" class="modal-content">
<img style='margin-top:25px; text-align: center' src="images/ajax-loader.gif">
</div>
</div>
</div>
<div id="header"> <div id="header">

View File

@ -145,7 +145,6 @@ editor = {};
editor.WaitDialog = new Class({ editor.WaitDialog = new Class({
initialize:function () { initialize:function () {
this.panel = this._buildPanel(); this.panel = this._buildPanel();
this.mask = $('#mask');
// this.parent({ // this.parent({
// closeButton:false, // closeButton:false,
// destroyOnClose:true, // destroyOnClose:true,
@ -192,43 +191,20 @@ editor.WaitDialog = new Class({
}, },
_buildPanel:function () { _buildPanel:function () {
var image = $('<img src="images/ajax-loader.gif">'); var result = $('#load');
image.css('margin-top', '25px'); var content = result.find('.modal-content');
var result = $('<div></div>') var winH = $(window).height();
.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();
//Set the popup window to center //Set the popup window to center
result.css('top', winH/2 - result.height()/2); content.css('margin-top', winH/2 - content.height()/2);
result.css('left', winW/2 - result.width()/2);
return result; return result;
}, },
show:function () { show:function () {
//Set height and width to mask to fill up the whole screen this.panel.modal();
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');
}, },
close: function() { close: function() {
this.panel.fadeOut('slow'); this.panel.hide();
this.mask.hide();
} }
}); });