jquery.jmpopups.js 弹出层进行进度显示(遮罩层)

最新推荐文章于 2023-04-03 10:45:29 发布

guoxu775

最新推荐文章于 2023-04-03 10:45:29 发布

阅读量9.4k

点赞数

分类专栏： web页面相关文章标签： function class callback processing div parameters

本文链接：https://blog.csdn.net/guoxu775/article/details/7700213

版权

该博客介绍了如何利用jquery.jmpopups.js库创建弹出层进行进度显示，包括showLoading用于展示进度条，hideLoading用于隐藏。提供了相关参考链接。

摘要由CSDN通过智能技术生成

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,