原创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 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
详解AngularJS controller调用factory
May 19 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 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创建PDF中文文档
2006/10/09 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
求网格中的黑点分布
2013/11/06 面试题
《第一次抱母亲》教学反思
2014/04/16 职场文书
2014年工商所工作总结
2014/12/09 职场文书
英文商务邀请函范文
2015/01/31 职场文书
我爱我班主题班会
2015/08/13 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang