`

jquery.jmpopups弹出层改造成post提交

 
阅读更多
/**
 * 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 closeWindow(title){
	//alert("!~~~~~~~~~~~~~~~ closeWindow");
	$.closePopupLayer(title);
}
function openWindow(windowUrl,windowName,windowSize) {
	$.openPopupLayer({
		name: windowName,
		width: $(document).width()/4,
		url: windowUrl
	});
}

(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);
			//alert("openedPopups.length:"+openedPopups.length);
			return this;
		}
	}
	
	$.closePopupLayer = function(name) {
		if (name) {
			//alert("name:"+name+"; openedPopups.length:"+openedPopups.length);
			for (var i = 0; i < openedPopups.length; i++) {
				//alert("openedPopups[i].name:"+openedPopups[i].name);
				if (openedPopups[i].name == name) {
					var thisPopup = openedPopups[i];
					
					openedPopups.splice(i,1)
					
					thisPopup.beforeClose();
					
					$("#popupLayer_" + name).fadeOut(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();
			}
   
			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();
		} 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-200 + "px",
				top: topPosition + "px"
			};
			
			if (!animate) {
				popupElement.css(positions);
			} else {
				popupElement.animate(positions, "slow");
			}
                        
            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;'>&nbsp;</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;'>&nbsp;</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();
		} else {
			popupElement.show();
		}

        $("#" + 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;'>&nbsp;</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 {
        	//源码,经过本人实验method设置成post也不行,故此改造成如下代码
           // $.ajax({
               // url: popupObject.url,
               // data: popupObject.parameters,
				//cache: popupObject.cache,
               // dataType: "html",
               // method: "GET",
              //  success: function(data) {
                   // showPopupLayerContent(popupObject, newElement, data);
               // },
				//error: popupObject.error
           // });
        	
        	//改造后的
        	$.post  
	  		(
	  				popupObject.url,
	  				popupObject.parameters,
					function(result) //回调函数   
				    {
	  					showPopupLayerContent(popupObject, newElement, result);
				  	},   
				  	"html" //返回类型   
	  		); 
			
		}
	}
	
	$(window).resize(function(){
		setScreenLockerSize();
		setPopupLayersPosition();
	});
	
	$(document).keydown(function(e){
		if (e.keyCode == 27) {
			$.closePopupLayer();
		}
	});
})(jQuery);

 

分享到:
评论

相关推荐

    弹出层jquery.jmpopups

    标题中的“弹出层jquery.jmpopups”指的是一个基于jQuery的弹出窗口插件,主要用于在网页上创建各种类型的弹出层,如提示框、对话框或模态窗口。这个插件通常可以帮助开发者轻松地实现动态显示和隐藏的内容区域,以...

    jquery.弹出框jquery.弹出框

    弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...

    jquery.popup 弹出层选择 提示

    《jQuery.popup弹出层选择与提示详解》 在网页交互设计中,弹出层(popup)是一种常见的用户界面元素,用于显示临时信息、提示、选择菜单等。jQuery.popup是jQuery库的一个扩展插件,它提供了丰富的功能,使开发者...

    jquery.purebox弹出层插件支持窗口对话框弹出层代码

    《jQuery Purebox弹出层插件详解及其应用》 在Web开发中,用户交互体验是至关重要的一个环节,其中弹出层(popup)作为一种常见的交互元素,被广泛应用于信息提示、对话框、图片预览等多种场景。jQuery Purebox插件...

    JQuery.BlockUI 弹出层

    jQuery.BlockUI是一个专门为jQuery设计的弹出层插件,它以其小巧的体积、易用性和强大的功能而受到开发者的青睐。 1. **插件简介** jQuery.BlockUI的核心功能在于能够阻止用户对页面的进一步操作,创建一种锁定...

    Jquery.Messager弹出消息插件

    **jQuery.Messager弹出消息插件** jQuery.Messager是一款基于jQuery库的弹出消息插件,设计灵感来源于MSN的对话提示效果。它能够帮助开发者在网页中轻松实现各种类型的提示信息,如警告、成功、错误等,为用户提供...

    jquery jmpopups 弹出新窗口,可以弹多个

    《jQuery jmpopups插件:实现弹出新窗口与多窗口管理》 在网页开发中,弹出新窗口的功能常用于展示详情、显示警告或提供交互体验,jQuery jmpopups是一个方便的工具,专为创建可自定义的新窗口而设计。这个插件允许...

    jQuery.mmenu-jquery.mobile最好看的侧边菜单

    结合使用jQuery Mobile和jQuery.mmenu,开发者可以快速构建出具有专业级用户体验的移动应用或网站。jQuery Mobile提供了丰富的UI组件,而jQuery.mmenu则专注于提供高质量的侧边菜单解决方案。两者相辅相成,使得开发...

    jquery.DOMWindow弹出层与TAB切换实例汇总.rar

    jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...

    jquery.marquee.js官方下载

    通过深入理解并实践这些知识点,开发者能够灵活运用jQuery.marquee.js创建出富有吸引力的滚动效果,提升网站或应用的用户体验。无论是新闻滚动、公告栏还是广告展示,这个插件都能提供强大的支持。记住,关键在于...

    jquery.form.js下载

    jquery.form.js jquery.form.js

    jquery.uploadify-v2.1.4[修正版]

    《jQuery.uploadify v2.1.4:中文友好修正版》 在Web开发中,上传功能是不可或缺的一部分,而jQuery.uploadify插件以其强大的功能和易用性深受开发者喜爱。这个"jquery.uploadify-v2.1.4[修正版]"正是基于官方的v...

    Jquery.json.js

    在早期版本的jQuery中,`jQuery.parseJSON()`函数用于将JSON字符串解析为JavaScript对象。然而,随着JSON支持成为JavaScript语言标准的一部分,现代浏览器都内置了`JSON.parse()`方法,这通常被认为更安全且推荐使用...

    jquery.min.map

    jquery.min.map is a good

    jquery form jquery.form.js

    jQuery Form插件主要由`jquery.form.js`脚本组成,它扩展了jQuery的$.ajax方法,提供了一种更加简单易用的方式来处理表单的异步提交。在压缩包中,源代码位于`src/jquery.form.js`,而压缩包的`dist`目录下提供了...

    jquery.pagination.js 下载

    jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来

    jquery.cookie.js下载

    jquery.cookie.js下载 jquery.cookie.js下载

    jquery.min.js,很好用的基础插件

    《jQuery.min.js:高效能的基础JavaScript库》 在Web开发领域,jQuery库以其简洁的语法、强大的功能和广泛的兼容性,赢得了开发者们的喜爱。而`jquery.min.js`是这个库的压缩版本,它将原本的jQuery库进行了优化,...

    Jquery.ScrollLoading图片延迟加载插件

    **jQuery.ScrollLoading图片延迟加载插件详解** 在网页设计中,优化页面性能是至关重要的,尤其是在处理大量图片的页面时。传统的做法是将所有图片一次性加载到浏览器中,这可能会导致页面加载速度变慢,用户体验...

    alert.js弹出层插件下载.zip

    3. **多用途**:弹出层不仅可以用于警告信息,还可以用于对话框、模态框、加载提示、表单提交等场景,其灵活性和可扩展性使得它可以适应各种项目需求。 4. **易用性**:通过简单的API调用,开发者可以快速创建弹出...

Global site tag (gtag.js) - Google Analytics