原创jQuery弹出层插件分享

前端技术 2023/09/02 JavaScript

依赖jquery,兼容IE6\\7\\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率。

/**
 * jQuery弹出层插件
 * 
 * @author lanhaoooo@163.com
 * @since 2014-08-23
 */
(function($) {
  var methods = {
    o : {
      isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9、IE10的
      ie6 : !-[ 1, ] && !window.XMLHttpRequest,
      ie9_10 : document.documentMode >= 9,
      bgLayer : \"layerModel_mask\",
      dataId : \"layerModel_main\",
      wrapper : \"layerModel_wrapper\",
      warpperContent : \"layerModel_content\",
      warpperTitle : \"layerModel_title\",
      warpperCloseBtn : \"layerModel_closeBtn\",
      warpperOwnContent : \"layerModel_ownContent\",
      replaceClose : \"replaceClose\",
      dragableClass : \"dragable\",
      defaultWidth : 300
    },
    generateId : function(){
      return \"_\" + new Date().getTime();
    },
    init : function(data, options) {
      //left和top想要使用的时候请设置center为false,这样的情况下才会生效,如果center = true则该设置不生效 #666,#999,#e5dfda ,#e5e5e5,#ff8800
      var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:\"0.5\",title:\"系统提示\",staySame:false,width:0,height:0,timer:0,bgColor:\"#fffaf6\",left:350,top:100,head:true,isClose:true,shake:false,
          close : function(){
            return true;
          }
        };
      options = $.extend(defaults, options);
      var s = this;
      var generateId = s.generateId();
      if (typeof data === \'object\') {
        data = data instanceof $ ? data : $(data);
        if(options.staySame) {
          data = s.createRender(data, options, generateId).hide();
        } else {
          data = s.createContainer(data, options, generateId).hide();
        }
      } else if (typeof data === \'string\' || typeof data === \'number\') {
        data = $(\"<div id=\'\"+s.o.dataId + generateId +\"\'></div>\").html(data).appendTo(document.body).hide();
      } else {
        alert(\"Layer Error : Unsupporte data type :\" + typeof data);
        return;
      }
      if (options.locked && !s.hasBgLayer()) {
        $(\"<div class=\'\"+s.o.bgLayer+\"\' id=\'\" + s.o.bgLayer + \"\'></div>\").appendTo(document.body).css({\"background\" : options.bgColor,\"opacity\" : options.opacity});
      }
      data.css({\"position\" : options.fixed ? s.o.ie6 ? \"absolute\" : \"fixed\" : \"absolute\",\"z-index\" : options.zIndex,\"left\" : options.left,\"top\" : options.top}).show();
      if (options.center) {
        s.fixLayer(data);
        $(window).bind(\"resize scroll\", function() {
          s.fixLayer(data);
        });
      }
      if (options.drag) {
        s.dragLayer(data, options);
      }
      if(options.shake) {
        s.shakeLayer(data);
      }
      var timeOut;
      clearTimeout(timeOut);
      if(options.timer > 0){
        timeOut = window.setTimeout(function(){
          $(\"#\"+s.o.replaceClose + generateId).trigger(\"click\");
        }, options.timer);
      }
      return data;
    },
    createContainer : function(data, options,generateId) {
      var s = this;
      //如果context未定义,则是通过html拼接的方式追加的否则就是原本就存在的,关闭后需要返回原地方
      var isHtmlSlice = data.context == undefined ? true : false;
      var wrapperHtml = \"<div class=\'\"+s.o.wrapper+\"\' id=\'\"+s.o.wrapper + generateId+\"\'>\"
                + \"<div class=\'\"+s.o.warpperContent+\"\' id=\'\"+s.o.warpperContent + generateId+\"\'>\"
                + \"<a class=\'\"+s.o.replaceClose+\"\' id=\'\"+s.o.replaceClose + generateId+\"\'></a>\";
                if(options.head){
                  wrapperHtml+= \"<h4 class=\'\"+s.o.warpperTitle+\" \"+s.o.dragableClass+\"\' id=\'\"+s.o.warpperTitle + generateId+\"\'>\";
                  if(options.isClose){
                    wrapperHtml+= \"<a href=\'javascript:void(0);\' title=\'关闭\' class=\'\"+s.o.warpperCloseBtn+\"\' id=\'\"+s.o.warpperCloseBtn + generateId+\"\'>×</a>\";
                  }
                  wrapperHtml+= options.title + \"</h4>\";
                }
                wrapperHtml+= \"<div id=\'\"+s.o.warpperOwnContent + generateId+\"\' class=\'\"+s.o.warpperOwnContent+\"\'></div>\"
                + \"</div>\"
              + \"</div>\";
      s.container = $(wrapperHtml);
      s.container.appendTo(document.body);
      data.clone(true).appendTo(\"#\"+s.o.warpperOwnContent + generateId).show().attr(\'id\',data.attr(\'id\') || s.o.dataId + generateId);
      //div默认宽度为100%,所以建议将所有弹出的元素设置宽度,否则弹出层宽度为100%
      var w = $(\"#\"+data.attr(\'id\')).width() || $(\"#\"+s.o.dataId + generateId).width() || s.o.defaultWidth;
      //指定了高度
      var tempWidth = w;
      if(options.height > 0 ) {
        if(options.width > 0){
          tempWidth = options.width;
          if(options.width <= w){
            $(\"#\"+s.o.warpperOwnContent + generateId).css({\"width\":options.width,\"overflow-x\":\"auto\"});
          } else {
            //如果指定的宽度大于元素本身的宽度,那么需要将元素居中
            //让元素始终居中显示
            var xPadding = (options.width - w) / 2 + 8;
            $(\"#\"+s.o.warpperOwnContent + generateId).css({\"padding\" : \"4px \" + xPadding + \"px\"});
          }
        }
        s.container.width(tempWidth + 32);
        $(\"#\"+s.o.warpperContent + generateId).width(tempWidth + 30);
        $(\"#\"+s.o.warpperOwnContent + generateId).css({\"height\":options.height,\"overflow-y\":\"auto\"});
      } else {
        if(options.width > 0) {
          tempWidth = options.width;
          if(options.width <= w) {
            $(\"#\"+s.o.warpperOwnContent + generateId).css({\"width\":options.width,\"overflow-x\":\"auto\"});
          }
        }
        s.container.width(tempWidth + 22);
        $(\"#\"+s.o.warpperContent + generateId).width(tempWidth + 20);
      }
      $(\"#\"+s.o.warpperCloseBtn + generateId).click(function(e) {
        $(\"#\"+s.o.replaceClose + generateId).trigger(\"click\");
      });
      $(\"#\"+s.o.replaceClose + generateId).click(function(e) {
        s.close($(\"#\"+s.o.wrapper + generateId), options, generateId);
        e.stopPropagation();
      });
      if(!isHtmlSlice){
        // 让传入的元素在对话框关闭后可以返回到原来的地方
        var display = data.css(\"display\");
        var obj = data[0];
        var prev = obj.previousSibling;
        var next = obj.nextSibling;
        var parent = obj.parentNode;
        this[\"elemBack_\" + generateId] = function(){
          if (prev && prev.parentNode) {
            prev.parentNode.insertBefore(obj, prev.nextSibling);
          } else if (next && next.parentNode) {
            next.parentNode.insertBefore(obj, next);
          } else if (parent) {
            parent.appendChild(obj);
          };
          data.css({\"display\" : display});
        };
      }
      data.detach();
      return s.container;
    },
    createRender : function(data, options,generateId){
      var s = this;
      //如果context未定义,则是通过html拼接的方式追加的否则就是原本就存在的,关闭后需要返回原地方
      var isHtmlSlice = data.context == undefined ? true : false;
      s.container = $(\"<div class=\'\"+s.o.wrapper+\"\' style=\'border:none;\' id=\'\"+s.o.wrapper + generateId+\"\'><a class=\'\"+s.o.replaceClose+\"\' id=\'\"+s.o.replaceClose + generateId+\"\'></a></div>\");
      s.container.appendTo(document.body);
      data.clone(true).appendTo(s.container).show().attr(\'id\',data.attr(\'id\') || s.o.dataId + generateId);
      $(\"#\"+s.o.replaceClose + generateId).click(function(e) {
        s.close($(\"#\"+s.o.wrapper + generateId), options, generateId);
        e.stopPropagation();
      });
      if(!isHtmlSlice){
        // 让传入的元素在对话框关闭后可以返回到原来的地方
        var display = data.css(\"display\");
        var obj = data[0];
        var prev = obj.previousSibling;
        var next = obj.nextSibling;
        var parent = obj.parentNode;
        s[\"elemBack_\" + generateId] = function(){
          if (prev && prev.parentNode) {
            prev.parentNode.insertBefore(obj, prev.nextSibling);
          } else if (next && next.parentNode) {
            next.parentNode.insertBefore(obj, next);
          } else if (parent) {
            parent.appendChild(obj);
          };
          data.css({\"display\" : display});
        };
      }
      data.detach();
      return s.container;
    },
    isLastLayer : function(){
      var s = this;
      return $(\".\" + s.o.wrapper).length <= 0;
    },
    hasBgLayer : function(){
      var s = this;
      return $(\".\" + s.o.bgLayer).length > 0;
    },
    close : function(data, options ,generateId) {
      var s = this;
      //调用回调函数
      var result = options.close();
      if(result == undefined || result){
        data.remove();
        if(s.isLastLayer()) {
          $(\"#\" + s.o.bgLayer).remove();
        }
      }
      if (s[\"elemBack_\" + generateId]) {
        s[\"elemBack_\" + generateId]();
      };
    },
    closeLayer : function(obj){
      var s = this;
      var $wapper = $(obj).parents(\"div.\"+s.o.wrapper);
      $(\".\"+s.o.replaceClose,$wapper).trigger(\"click\");
    },
    fixLayer : function(data) {
      var s = this;
      var T = ($(window).height() - data.innerHeight()) / 2 + (s.o.ie6 ? $(document).scrollTop() : data.scrollTop());
      var L = ($(window).width() - data.width()) / 2 + (s.o.ie6 ? $(document).scrollLeft() : data.scrollLeft());
      data.css({\"left\" : L,\"top\" : T});
    },
    dragLayer : function(data, options) {
      var s = this;
      var move = false;// 移动标记
      var x = 0, y = 0;// 鼠标离控件左上角的相对位置
      var o = data.find(\".\" + s.o.dragableClass).css({\"cursor\" : \"move\"});
      var a = o[0];
      o.mousedown(function(e) {
        //IE9 IE10居然把e.button改成0了,艹
        var isLeftClick = (s.o.isIe && e.button == 1) || (!s.o.isIe && e.button == 0) || (s.o.ie9_10 && e.button == 0);
        if (isLeftClick) {
          data.fadeTo(20, 0.25);// 点击后开始拖动并透明显示
          s.o.isIe ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
          move = true;
          x = e.pageX - parseInt(data.css(\"left\"));
          y = e.pageY - parseInt(data.css(\"top\"));
          $(document).mousemove(function(e) {
            if (move) {
              var sx = e.pageX - x;// 移动时根据鼠标位置计算控件左上角的绝对位置
              var sy = e.pageY - y;
              data.css({\"top\" : sy,\"left\" : sx});
            }
          }).mouseup(function() {
            data.fadeTo(\"fast\", 1);// 松开鼠标后停止移动并恢复成不透明
            move = false;
            x = 0;
            y = 0;
            s.o.isIe ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
          });
        } else {
          return false;
        }
      });
    },
    shakeLayer : function(data){
      var ll = ($(window).width() - data.width()) / 2;  
      var loop = 4;
      for(var i=1; i<=loop; i++){
        data.animate({left:ll - (loop * 10 - 10 * i)},50);  
        data.animate({left:ll + 2*(loop * 10 - 10 * i)},50);  
      }
    }
  };
  $.fn.layerModel = function(options) {
    methods.init(this, options);
  };
  $.fn.close = function() {
    methods.closeLayer(this);
  };
  $.fn.fix = function() {
    var mn = $(this).parents(\".\" + methods.o.wrapper);
    methods.fixLayer($(mn[0]));
  };
})(jQuery);

以上所述就是本文的全部内容了,希望大家能够喜欢。

本文地址:https://www.stayed.cn/item/4607

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。