原创jQuery弹出层插件分享


Posted in Javascript onApril 02, 2015

依赖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);

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

Javascript 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 #Javascript
Javascript获取表单名称(name)的方法
Apr 02 #Javascript
如何改进javascript代码的性能
Apr 02 #Javascript
JavaScript获得表单target属性的方法
Apr 02 #Javascript
AngularJS快速入门
Apr 02 #Javascript
Javascript中的包装类型介绍
Apr 02 #Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 #Javascript
You might like
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
Open and Print a Word Document
2007/06/15 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python实现的自动发送消息功能详解
2019/08/15 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
jupyter notebook清除输出方式
2020/04/10 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python 绘制可视化折线图
2020/07/22 Python
Python 多进程原理及实现
2020/12/21 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
公司财务总监岗位职责
2013/12/14 职场文书
信息员培训方案
2014/06/12 职场文书
2014年预算员工作总结
2014/12/05 职场文书