查看: 148|回复: 4

[JavaSE] jquery弹出层特效代码

[复制链接]
  • TA的每日心情
    慵懒
    2015-11-28 14:57
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2018-12-1 17:46:39 | 显示全部楼层 |阅读模式
    1. /**
    2. * jmpopups
    3. * Copyright (c) 2009 Otavio Avila (http://otavioavila.com)
    4. * Licensed under GNU Lesser General Public License
    5. * @docs http://jmpopups.googlecode.com/
    6. * @version 0.5.1
    7. *
    8. */


    9. (function($) {
    10.     var openedPopups = [];
    11.     var popupLayerScreenLocker = false;
    12.     var focusableElement = [];
    13.     var setupJqueryMPopups = {
    14.         screenLockerBackground: "#000",
    15.         screenLockerOpacity: "0.5"
    16.     };

    17.     $.setupJMPopups = function(settings) {
    18.         setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
    19.         return this;
    20.     }

    21.     $.openPopupLayer = function(settings) {
    22.         if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
    23.             settings = jQuery.extend({
    24.                 width: "auto",
    25.                 height: "auto",
    26.                 parameters: {},
    27.                 target: "",
    28.                 success: function() {},
    29.                 error: function() {},
    30.                 beforeClose: function() {},
    31.                 afterClose: function() {},
    32.                 reloadSuccess: null,
    33.                 cache: false
    34.             }, settings);
    35.             loadPopupLayerContent(settings, true);
    36.             return this;
    37.         }
    38.     }
    39.    
    40.     $.closePopupLayer = function(name) {
    41.         if (name) {
    42.             for (var i = 0; i < openedPopups.length; i++) {
    43.                 if (openedPopups[i].name == name) {
    44.                     var thisPopup = openedPopups[i];
    45.                     
    46.                     openedPopups.splice(i,1)
    47.                     
    48.                     thisPopup.beforeClose();
    49.                     
    50.                     $("#popupLayer_" + name).fadeOut(function(){
    51.                         $("#popupLayer_" + name).remove();
    52.                     
    53.                         focusableElement.pop();
    54.    
    55.                         if (focusableElement.length > 0) {
    56.                             $(focusableElement[focusableElement.length-1]).focus();
    57.                         }
    58.    
    59.                         thisPopup.afterClose();
    60.                         hideScreenLocker(name);
    61.                     });
    62.                     
    63.                     
    64.    
    65.                     break;
    66.                 }
    67.             }
    68.         } else {
    69.             if (openedPopups.length > 0) {
    70.                 $.closePopupLayer(openedPopups[openedPopups.length-1].name);
    71.             }
    72.         }
    73.         
    74.         return this;
    75.     }
    76.    
    77.     $.reloadPopupLayer = function(name, callback) {
    78.         if (name) {
    79.             for (var i = 0; i < openedPopups.length; i++) {
    80.                 if (openedPopups[i].name == name) {
    81.                     if (callback) {
    82.                         openedPopups[i].reloadSuccess = callback;
    83.                     }
    84.                     
    85.                     loadPopupLayerContent(openedPopups[i], false);
    86.                     break;
    87.                 }
    88.             }
    89.         } else {
    90.             if (openedPopups.length > 0) {
    91.                 $.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
    92.             }
    93.         }
    94.         
    95.         return this;
    96.     }

    97.     function setScreenLockerSize() {
    98.         if (popupLayerScreenLocker) {
    99.             $('#popupLayerScreenLocker').height($(document).height() + "px");
    100.             $('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
    101.         }
    102.     }
    103.    
    104.     function checkIfItExists(name) {
    105.         if (name) {
    106.             for (var i = 0; i < openedPopups.length; i++) {
    107.                 if (openedPopups[i].name == name) {
    108.                     return true;
    109.                 }
    110.             }
    111.         }
    112.         return false;
    113.     }
    114.    
    115.     function showScreenLocker() {
    116.         if ($("#popupLayerScreenLocker").length) {
    117.             if (openedPopups.length == 1) {
    118.                 popupLayerScreenLocker = true;
    119.                 setScreenLockerSize();
    120.                 $('#popupLayerScreenLocker').fadeIn();
    121.             }
    122.    
    123.             if ($.browser.msie && $.browser.version < 7) {
    124.                 $("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
    125.             }
    126.                
    127.             $('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
    128.         } else {
    129.             $("body").append("<div id='popupLayerScreenLocker'><!-- --></div>");
    130.             $("#popupLayerScreenLocker").css({
    131.                 position: "absolute",
    132.                 background: setupJqueryMPopups.screenLockerBackground,
    133.                 left: "0",
    134.                 top: "0",
    135.                 opacity: setupJqueryMPopups.screenLockerOpacity,
    136.                 display: "none"
    137.             });
    138.             showScreenLocker();

    139.             $("#popupLayerScreenLocker").click(function() {
    140.                 $.closePopupLayer();
    141.             });
    142.         }
    143.     }
    144.    
    145.     function hideScreenLocker(popupName) {
    146.         if (openedPopups.length == 0) {
    147.             screenlocker = false;
    148.             $('#popupLayerScreenLocker').fadeOut();
    149.         } else {
    150.             $('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
    151.         }
    152.    
    153.         if ($.browser.msie && $.browser.version < 7) {
    154.             $("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
    155.         }
    156.     }
    157.    
    158.     function setPopupLayersPosition(popupElement, animate) {
    159.         if (popupElement) {
    160.             if (popupElement.width() < $(window).width()) {
    161.                 var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
    162.             } else {
    163.                 var leftPosition = document.documentElement.scrollLeft + 5;
    164.             }

    165.             if (popupElement.height() < $(window).height()) {
    166.                 var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
    167.             } else {
    168.                 var topPosition = document.documentElement.scrollTop + 5;
    169.             }
    170.             
    171.             var positions = {
    172.                 left: leftPosition + "px",
    173.                 top: topPosition + "px"
    174.             };
    175.             
    176.             if (!animate) {
    177.                 popupElement.css(positions);
    178.             } else {
    179.                 popupElement.animate(positions, "slow");
    180.             }
    181.                         
    182.             setScreenLockerSize();
    183.         } else {
    184.             for (var i = 0; i < openedPopups.length; i++) {
    185.                 setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
    186.             }
    187.         }
    188.     }

    189.     function showPopupLayerContent(popupObject, newElement, data) {
    190.         var idElement = "popupLayer_" + popupObject.name;

    191.         if (newElement) {
    192.             showScreenLocker();
    193.             
    194.             $("body").append("<div id='" + idElement + "'><!-- --></div>");
    195.             
    196.             var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
    197.         }  else {
    198.             var zIndex = $("#" + idElement).css("z-index");
    199.         }

    200.         var popupElement = $("#" + idElement);
    201.         
    202.         popupElement.css({
    203.             visibility: "hidden",
    204.             width: popupObject.width == "auto" ? "" : popupObject.width + "px",
    205.             height: popupObject.height == "auto" ? "" : popupObject.height + "px",
    206.             position: "absolute",
    207.             "z-index": zIndex
    208.         });
    209.         
    210.         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;' />";
    211.         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;' />";

    212.         popupElement.html(linkAtTop + data + linkAtBottom);
    213.         
    214.         setPopupLayersPosition(popupElement);

    215.         popupElement.css("display","none");
    216.         popupElement.css("visibility","visible");
    217.         
    218.         if (newElement) {
    219.             popupElement.fadeIn();
    220.         } else {
    221.             popupElement.show();
    222.         }

    223.         $("#" + idElement + " .jmp-link-at-top, " +
    224.           "#" + idElement + " .jmp-link-at-bottom").focus(function(){
    225.             $(focusableElement[focusableElement.length-1]).focus();
    226.         });
    227.         
    228.         var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
    229.                                    "#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");
    230.                            
    231.         if (jFocusableElements.length == 0) {
    232.             var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'> </a>";
    233.             popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
    234.             focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
    235.         } else {
    236.             jFocusableElements.each(function(){
    237.                 if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
    238.                     focusableElement.push(this);
    239.                     return false;
    240.                 }
    241.             });
    242.         }
    243.         
    244.         $(focusableElement[focusableElement.length-1]).focus();

    245.         popupObject.success();
    246.         
    247.         if (popupObject.reloadSuccess) {
    248.             popupObject.reloadSuccess();
    249.             popupObject.reloadSuccess = null;
    250.         }
    251.     }
    252.    
    253.     function loadPopupLayerContent(popupObject, newElement) {
    254.         if (newElement) {
    255.             openedPopups.push(popupObject);
    256.         }
    257.         
    258.         if (popupObject.target != "") {
    259.             showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
    260.         } else {
    261.             $.ajax({
    262.                 url: popupObject.url,
    263.                 data: popupObject.parameters,
    264.                 cache: popupObject.cache,
    265.                 dataType: "html",
    266.                 method: "GET",
    267.                 success: function(data) {
    268.                     showPopupLayerContent(popupObject, newElement, data);
    269.                 },
    270.                 error: popupObject.error
    271.             });
    272.         }
    273.     }
    274.    
    275.     $(window).resize(function(){
    276.         setScreenLockerSize();
    277.         setPopupLayersPosition();
    278.     });
    279.    
    280.     $(document).keydown(function(e){
    281.         if (e.keyCode == 27) {
    282.             $.closePopupLayer();
    283.         }
    284.     });
    285. })(jQuery);
    复制代码


  • TA的每日心情

    2019-1-11 15:04
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2019-1-11 17:26:03 | 显示全部楼层
    后缀名是什么
    您需要登录后才可以回帖 登录 | 注册青鸟豆号

    本版积分规则

    Copyright 1999-2019 Beijing Aptech Beida Jade Bird Information Technology Co.,Ltd

    北大青鸟IT教育 北京阿博泰克北大青鸟信息技术有限公司 版权所有

    京ICP备11045574号-3 京公网安备11010802013845号

    快速回复 返回顶部 返回列表