jquery.jmpopups.js 弹出层 进行进度显示(遮罩层)
效果如:
/**
* 显示loading画面
* @param desc
* @return
*/
function showLoading(desc) {
$("body").append("<div id=\"processingdiv\" style=\"display:none;\"><div class=\"popup\"> <div class=\"popup-body\"><div class=\"loading\"><span>"+desc+"</span></div></div></div></div>");
//alert($("head").html());
$.openPopupLayer({
name: "processing",
width: 500,
target: "processingdiv"
});
}
/**
* 关闭loading画面
* @param desc
* @return
*/
function hideLoading() {
$.closePopupLayer('processing');
$("#processingdiv").remove();
}
showLoading--表示显示进度条
hideLoading-表示隐藏
参考:
jquery.jmpopups.js
/**
* jmpopups
* Copyright (c) 2009 Otavio Avila (http://otavioavila.com)
* Licensed under GNU Lesser General Public License
*
* @docs http://jmpopups.googlecode.com/
* @version 0.5.1
*
*/
(function($) {
var openedPopups = [];
var popupLayerScreenLocker = false;
var focusableElement = [];
var setupJqueryMPopups = {
screenLockerBackground: "#000",
screenLockerOpacity: "0.5"
};
$.setupJMPopups = function(settings) {
setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
return this;
}
$.openPopupLayer = function(settings) {
if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
settings = jQuery.extend({
width: "auto",
height: "auto",
parameters: {},
target: "",
success: function() {},
error: function() {},
beforeClose: function() {},
afterClose: function() {},
reloadSuccess: null,
cache: false
}, settings);
loadPopupLayerContent(settings, true);
return this;
}
}
$.closePopupLayer = function(name) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
var thisPopup = openedPopups[i];
openedPopups.splice(i,1)
thisPopup.beforeClose();
$("#popupLayer_" + name).fadeOut(0,function(){
$("#popupLayer_" + name).remove();
focusableElement.pop();
if (focusableElement.length > 0) {
$(focusableElement[focusableElement.length-1]).focus();
}
thisPopup.afterClose();
hideScreenLocker(name);
});
break;
}
}
} else {
if (openedPopups.length > 0) {
$.closePopupLayer(openedPopups[openedPopups.length-1].name);
}
}
return this;
}
$.reloadPopupLayer = function(name, callback) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
if (callback) {
openedPopups[i].reloadSuccess = callback;
}
loadPopupLayerContent(openedPopups[i], false);
break;
}
}
} else {
if (openedPopups.length > 0) {
$.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
}
}
return this;
}
function setScreenLockerSize() {
if (popupLayerScreenLocker) {
$('#popupLayerScreenLocker').height($(document).height() + "px");
$('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
}
}
function checkIfItExists(name) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
return true;
}
}
}
return false;
}
function showScreenLocker() {
if ($("#popupLayerScreenLocker").length) {
if (openedPopups.length == 1) {
popupLayerScreenLocker = true;
setScreenLockerSize();
$('#popupLayerScreenLocker').fadeIn(0);
}
if ($.browser.msie && $.browser.version < 7) {
$("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
}
$('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
} else {
$("body").append("<div id='popupLayerScreenLocker'><!-- --></div>");
$("#popupLayerScreenLocker").css({
position: "absolute",
background: setupJqueryMPopups.screenLockerBackground,
left: "0",
top: "0",
opacity: setupJqueryMPopups.screenLockerOpacity,
display: "none"
});
showScreenLocker();
$("#popupLayerScreenLocker").click(function() {
// $.closePopupLayer();
});
}
}
function hideScreenLocker(popupName) {
if (openedPopups.length == 0) {
screenlocker = false;
$('#popupLayerScreenLocker').fadeOut(0);
} else {
$('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
}
if ($.browser.msie && $.browser.version < 7) {
$("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
}
}
function setPopupLayersPosition(popupElement, animate) {
if (popupElement) {
if (popupElement.width() < $(window).width()) {
var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
} else {
var leftPosition = document.documentElement.scrollLeft + 5;
}
if (popupElement.height() < $(window).height()) {
var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
} else {
var topPosition = document.documentElement.scrollTop + 5;
}
var positions = {
left: leftPosition + "px",
top: topPosition + "px"
};
if (!animate) {
popupElement.css(positions);
} else {
popupElement.animate(positions, "10");
}
setScreenLockerSize();
} else {
for (var i = 0; i < openedPopups.length; i++) {
setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
}
}
}
function showPopupLayerContent(popupObject, newElement, data) {
var idElement = "popupLayer_" + popupObject.name;
if (newElement) {
showScreenLocker();
$("body").append("<div id='" + idElement + "'><!-- --></div>");
var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
} else {
var zIndex = $("#" + idElement).css("z-index");
}
var popupElement = $("#" + idElement);
popupElement.css({
visibility: "hidden",
width: popupObject.width == "auto" ? "" : popupObject.width + "px",
height: popupObject.height == "auto" ? "" : popupObject.height + "px",
position: "absolute",
"z-index": zIndex
});
var linkAtTop = "<a href='#' class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;'></a><input class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;' />";
var linkAtBottom = "<a href='#' class='jmp-link-at-bottom' style='position:absolute; left:-9999px; bottom:-1px;'></a><input class='jmp-link-at-bottom' style='position:absolute; left:-9999px; top:-1px;' />";
popupElement.html(linkAtTop + data + linkAtBottom);
setPopupLayersPosition(popupElement);
popupElement.css("display","none");
popupElement.css("visibility","visible");
if (newElement) {
popupElement.fadeIn(0);
} else {
popupElement.show(0);
}
$("#" + idElement + " .jmp-link-at-top, " +
"#" + idElement + " .jmp-link-at-bottom").focus(function(){
$(focusableElement[focusableElement.length-1]).focus();
});
var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
"#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");
if (jFocusableElements.length == 0) {
var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'></a>";
popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
} else {
jFocusableElements.each(function(){
if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
focusableElement.push(this);
return false;
}
});
}
$(focusableElement[focusableElement.length-1]).focus();
popupObject.success();
if (popupObject.reloadSuccess) {
popupObject.reloadSuccess();
popupObject.reloadSuccess = null;
}
}
function loadPopupLayerContent(popupObject, newElement) {
if (newElement) {
openedPopups.push(popupObject);
}
if (popupObject.target != "") {
showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
} else {
$.ajax({
url: popupObject.url,
data: popupObject.parameters,
cache: popupObject.cache,
dataType: "html",
method: "GET",
success: function(data) {
showPopupLayerContent(popupObject, newElement, data);
},
error: popupObject.error
});
}
}
$(window).resize(function(){
setScreenLockerSize();
setPopupLayersPosition();
});
$(document).keydown(function(e){
if (e.keyCode == 27) {
$.closePopupLayer();
}
});
})(jQuery);
分享到:
相关推荐
NULL 博文链接:https://dpn525.iteye.com/blog/1258482
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
单页后退前进刷新 jquery.hash.min.js 和 jquery.ba-hashchange.min.js
jquery.cookie.js,jquery-1.11.0.min.js,respond.min.js, bootstrap.min.js,html5shiv.js
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
jquery.jsoncookie.js
jQuery.dialog.js插件实现漂亮的轻量级对话框效果,多种样式jQuery网页弹出对话框美化特效。
jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码
jquery.form.js jquery.form.js
jquery.qrcode.min.js 二维码的jquery插件
在官网上一直下载不下来 然后共享在这 jquery.json-2.3.min.js和jquery.json-2.3.js
jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来
个人把常用的一些jquery插件做了一个demo,里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery...
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery.json2xml.js&&jquery.xml2json.js在jQuery的基础上实现json与xml的相互转换
jquery.cookie.js下载 jquery.cookie.js下载