vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-12-26 21:23:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

using bootstrap for modal loading dialog

Browse Source
This commit is contained in:
Ezequiel Bergamaschi 2014-03-09 20:50:41 -03:00
parent 3969097d21
commit 18584e8c9f
2 changed files with 13 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wise-editor/src/main/webapp/html/editor.html
View File

@ -36,18 +36,16 @@
});
</script>
<style>
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
</style>
</head>
<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">

36
wise-editor/src/main/webapp/js/editor.js
View File

@ -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();
}
});