jquery插件弹出div

发表于 2010 年 8 月 12 日 由 惜分飞

联系：手机/微信(+86 17813235971) QQ(107644445)QQ咨询惜分飞

标题：jquery插件弹出div

作者：惜分飞©版权所有[未经本人同意,不得以任何形式转载,否则有进一步追究法律责任的权利.]

一直在为弹出遮挡层的div烦恼着，今天网上找了下，发现jmpopups很不错，稍微修改下，基本上可以实现需要功能

总体HTML代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
 <script type="text/javascript">
 //<![CDATA[
 $.setupJMPopups({
 screenLockerBackground: "#003366",
 screenLockerOpacity: "0.7"
 });

 function openStaticPopup() {
 $.openPopupLayer({
 name: "myStaticPopup",
 width: 400,
 target: "myHiddenDiv"
 });
 }
 //]]>
 </script>
 <style type="text/css" media="screen">
 #myHiddenDiv {display:none;}
 .popup {background:#FFF; border:1px solid #333; padding:1px;}
 .popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
 .popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
 .popup-header .close-link {float:right; font-size:11px;}
 .popup-body {padding:10px;}
 </style>
</head>
<body>
<a href="javascript:void();" onclick="openStaticPopup();" title="Static example">添加Flash信息</a>
 <div id="myHiddenDiv">
 <div>
 <div>
 <h2>添加Flash信息</h2>
 <a href="javascript:void();" onclick="$.closePopupLayer('myStaticPopup');" title="Close">Close</a>
 <br clear="all" />
 </div>
 <div>
 <table>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td>选择图片</td><td>13123124124312413413</td></tr>
 <tr><td></td><td>提交</td></tr>
 </table>
 </div>
 </div>
 </div>
</body>
</html>

jmpopups代码：


(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);

使用说明：

myHiddenDiv表示要弹出来的整体div

popup-body中的内容替换为你需要的内容

openStaticPopup();表示弹出div，锁定界面

$.closePopupLayer(‘myStaticPopup’);表示关闭div，解锁界面

<h2></h2>弹出div的标题

openStaticPopup中的width表示弹出div的宽度

其实就是细节上的调整

效果

jquery.jmpopups（弹出div，锁住界面）

此条目发表在 JavaScript 分类目录。将固定链接加入收藏夹。

《jquery插件弹出div》有 1 条评论

  1. 西湖小巷 说：
    2011 年 8 月 22 日10:33

    在弹出层中加一个按钮加一个button如何点击button获取到文本框的输入值呢？请教高手