验证中...
助力高校计算机教育 —— 码云为老师推出免费高校版,高达 200 人的协作团队
語言: JavaScript
分類: Web开发技术
最後更新於 2018-06-14 08:30
利用bootstrap modal实现等待遮罩窗口
原始數據 複製代碼
///////////////////////////////////////////////
// 遮罩等待效果 BEGIN
///////////////////////////////////////////////
/**
* 遮罩层。使用bootstrap modal实现。
* 已知问题:多modal的时候,遮罩层颜色会越来越深,已做处理,但是有时间延迟,能看到颜色先变深后恢复.
*/
function initLoading(){
$("body").append("<!-- loading -->" +
"<div class='modal fade' " +
" id='system-common-loading' " +
" zIndex='10000' " +
" style='" +
" tabindex='-1' role='dialog' aria-labelledby='myModalLabel' data-backdrop='static'>" +
" <div class='modal-dialog' role='document' style='min-width:280px;width:20em;'>" +
" <div class='modal-content'>" +
//" <div class='modal-header'>" +
//" <h4 class='modal-title' id='myModalLabel'>提示</h4>" +
//" </div>" +
" <div class='modal-body' style='vertical-align: middle;'>" +
" <img src='../images/common/loading.gif'/>" +
" <div id='system-common-loadingText' style='display:inline-block;line-height:33px;margin-left:1em;'>" +
" 处理中,请稍候。。。" +
" </div>" +
" <div id='close' style='display:inline-block;line-height:33px;float:right;'>" +
" </div>" +
" </div>" +
" </div>" +
" </div>" +
"</div>"
);
}
/**
* 遮罩层手动启动函数和关闭函数。
* 在ajax请求参数中,如果设置了showLoading 会自动启动和关闭遮罩层。
* 一定时间(默认5s)后,显示关闭按钮。
* @param message
* @returns
*/
var loadingModalCount = 0;
var loadingModalTimer = null;
var loadingModalDefaultSeconds = 5;
function showLoading(message){
var text = message || '处理中,请稍候……';
if ($("#system-common-loadingText").length === 0) {
initLoading();
loadingModalCount = 0;
}
loadingModalCount ++;
if (loadingModalCount === 1) {
$("#system-common-loadingText").html(text);
$("#system-common-loading").modal('show');
loadingModalTimer = setTimeout(function(){
var closeLink = "<a href='#' onClick='resetLoading();'><img src='../images/common/loading-close.png'></a>";
$("#system-common-loading #close").html(closeLink);
}, loadingModalDefaultSeconds * 1000);// 5s后显示关闭
}
}
function hideLoading(){
loadingModalCount --;
if (loadingModalCount < 0) {
loadingModalCount = 0;
}
if (loadingModalCount === 0) {
clearTimeout(loadingModalTimer);
$("#system-common-loading").modal('hide');
}
}
/**
* 重置遮罩层
* @returns
*/
function resetLoading() {
try {
loadingModalCount = 0;
$("#system-common-loading").modal('hide');
console.log('resetLoading done');
} catch (error) {
console.log('resetLoading error', error);
}
}
/**
* 在ajax请求参数中,如果设置了showLoading 会自动启动和关闭遮罩层。
* ajax参数:
* #1 showLoading: false, 不显示遮罩窗口
* #2 showLoadingMessage: 遮罩窗口的显示文字,默认为【处理中】
*/
$( document).ajaxSend(function(event, xhr, settings) {
if (settings.showLoading == false || settings.showLoading === 'false') {
return;
}
showLoading(settings.showLoadingMessage || '处理中...');
console.log('ajaxSend: modal count ', loadingModalCount, 'url', settings.url);
});
$( document).ajaxComplete(function(event, xhr, settings) {
if (settings.showLoading == false || settings.showLoading === 'false') {
return;
}
hideLoading();
console.log('ajaxComplete: modal count ', loadingModalCount, 'url', settings.url);
});
/**
* 显示多个modal对话框时,隐藏之前的窗口。
* 目的:减弱前面提到的【遮罩层颜色会越来越深】的问题
* @param event
* @returns
*/
$(document).on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('body'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
function setModalsAndBackdropsOrder() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
///////////////////////////////////////////////
//遮罩等待效果 END
///////////////////////////////////////////////

評論列表( 0 )

你可以在登錄後,發表評論

10_float_left_people 10_float_left_close