`

jquery.jmpopups点击空白处和按ESC键后让遮罩层不关闭的方法

 
阅读更多
(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(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 + "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 {
            $.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);

 把$("#popupLayerScreenLocker").click(function() {
                //$.closePopupLayer();
            });

 

和$(document).keydown(function(e){
  if (e.keyCode == 27) {
    // $.closePopupLayer();
  }
 });注释掉就可以了

0
0
分享到:
评论

相关推荐

    弹出层jquery.jmpopups

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

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对浏览器 URL hash 变化的处理,从而实现单页面应用(Single Page Application, SPA)中后退和前进按钮的刷新功能...

    jquery.lightbox.js遮罩层图片幻灯片自适应图片

    jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片 jquery.lightbox.js遮罩层图片幻灯片自适应图片

    jquery.tools.min.js 最新的1.2.7版本

    jquery.min.js是压缩版的jquery库,是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。 jquery.min.js版本一般用于网站...

    jquery.json-2.3.min.js和jquery.json-2.3.js

    jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。

    jquery遮罩层插件mloading

    **jQuery 遮罩层插件 mloading** 在网页开发中,为了提供更好的用户体验,我们经常需要在数据加载或处理过程中显示一个遮罩层,让用户知道后台正在执行操作。jQuery 插件 `mloading` 正是为此目的设计的。这个插件...

    jQuery点击弹出遮罩层图片放大查看代码

    它利用jQuery库,结合遮罩层(mask)和图片放大功能,使得用户只需点击图片,就能在不离开当前页面的情况下查看更清晰的图片细节。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件...

    jquery.marquee.js官方下载

    3. **暂停与继续**:可以通过事件或方法实现滚动的暂停和继续,例如鼠标悬停时暂停,鼠标离开后继续滚动。 4. **自动重复**:内容滚动到尽头后,可以自动反转方向并重新开始,形成循环滚动效果。 5. **兼容性**:...

    jquery.json2xml.js和jquery.xml2json.js

    在jQuery的基础上,`jquery.json2xml.js` 和 `jquery.xml2json.js` 这两个脚本提供了方便的方法来在JSON和XML之间进行转换,从而让开发者无需深入了解这两种格式的复杂性,就能轻松地在它们之间进行数据互换。...

    jquery.alerts.js(jQuery Alert, Confirm, Prompt)

    《jQuery Alert, Confirm, Prompt 实现详解》 在网页开发中,我们经常需要与用户进行交互,例如显示警告信息、确认操作或者获取用户输入。原生JavaScript提供了alert(), confirm(), prompt()函数,但它们的样式固定...

    点击遮罩层的背景关闭遮罩层

    在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和...

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

    在Web开发中,上传功能是不可或缺的一部分,而jQuery.uploadify插件以其强大的功能和易用性深受开发者喜爱。这个"jquery.uploadify-v2.1.4[修正版]"正是基于官方的v2.1.4版本进行了一次关键的优化,特别针对中文支持...

    jquery.blockUI.js

    除了基本的使用方法,jQuery.blockUI.js还提供了丰富的选项来自定义遮罩层的外观和行为: - `message`:设置显示在遮罩层中的消息内容。 - `css`:允许自定义遮罩层的CSS样式,例如背景颜色、透明度等。 - `...

    Jquery.json.js

    jQuery提供了方便的方法来处理JSON数据,包括`$.getJSON()`和`$.ajax()`等函数,可以方便地从服务器获取JSON数据并将其转化为JavaScript对象,或者将JavaScript对象转换为JSON字符串发送到服务器。 **jQuery的get...

    jquery.form.js下载

    jquery.form.js jquery.form.js

    jquery.paginate.js

    2. 初始化插件:在文档加载完成后,通过jQuery选择器找到需要添加分页的元素,并调用`.paginate()`方法进行初始化。例如: ```javascript $(document).ready(function() { $('#pagination').paginate({ items: 10,...

    jQuery图片点击弹出遮罩层标记注释特效

    在这个项目中,我们讨论的是如何利用jQuery实现一种独特的图片点击功能,即在用户点击图片后,会弹出一个半透明的遮罩层,允许用户在图片上添加标记和注释。 首先,我们需要理解项目的基本结构。`index.html`是主...

    jquery.blockUI.js 使用示例

    除了基本的阻塞和解阻塞功能,jQuery.blockUI.js还支持更复杂的场景,例如仅阻塞特定元素、响应用户操作(如点击ESC键关闭遮罩层)、以及自定义回调函数等。这使得它成为Web开发中不可或缺的工具,特别是在提升用户...

    jquery.alerts.css jquery.alerts.js

    “jquery.alerts.js”是实现jQuery Alerts功能的JavaScript文件,它扩展了jQuery对象,添加了新的方法来创建和管理自定义对话框。主要方法包括: 1. `$.alert()`: 用于显示警告对话框,可以传递文本信息、标题、...

    简单的jquery.cookie插件使弹窗点击关闭后一天弹一次.zip

    在这个场景下,`jquery.cookie` 插件的应用可以帮助我们实现一个更智能的弹窗策略:用户关闭弹窗后,一天内不再显示。接下来,我们将详细讲解如何使用 `jquery.cookie` 插件以及实现这个功能的具体步骤。 首先,`...

Global site tag (gtag.js) - Google Analytics