哪个 jquery 覆盖库最好？ [关闭]

Question

我经常使用 lightbox 和 fancybox，但从未真正看到任何理由选择其中一个。还有一大堆我没用过，比如http://planetozh.com/projects/lightbox-clones/。该页面上的数据相当陈旧，而且在很多情况下是不正确的。

是否有充分的理由选择其中之一？性能、API 选项、易于定制等。

这更像是一个主观问题，而不是黑白问题。我没有看到关于这个主题的任何比较，不知道在哪里可以问这个。

编辑 在查看了建议后，我认为 fancybox 有最好的 api，而且压缩后只有 5kb。 http://fancybox.net/apiColorbox 也很好看。

可用性提示：如果您想从焦点窃取覆盖中捕获用户输入，请不要这样做。如果用户需要查看父窗口上的信息来填写您的表单，他们现在就被困住了。有时这些弹出窗口是合适的，但大多数时候滑动块元素会做得更好。

Answer 1

我喜欢colorbox

Answer 2

我刚刚检查了 colorBox 并发现它有 1000 行代码来添加叠加层。有时我想要的只是在页面中心打开一个元素（例如 div）的内容，而像 colorBox 这样的插件对于这些简单的任务来说绝对是矫枉过正。

这样简单的任务（工具提示、覆盖等）最好的办法是创建自己的插件：

(function($, global) {

  "use strict";

  $.fn.cOverlay = function(contentClass) {
    var contentItems = contentClass || '.cOverlay';
    var template = $('<div class="overlay"><div class="content"><div class="close">close</div></div></div>');
    var overlay = template.css({
      'position': 'absolute',
      'width': '100%',
      'height': '100%',
      'backgroundColor': '#555',
      'top': '0',
      'left': '0',
      'display': 'none'
    });
    var content = template.find(".content").css({
      'float': 'left',
      'backgroundColor': '#fff'

    });
    var close = template.find(".close");

    content.append($(contentItems));
    $(contentItems).show();

    this.click(function() {

      overlay.show();
      content.show();


      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;

      content.css('marginTop', height);
      content.css('marginLeft', width);

      return false;
    });

    content.click(function(e) {
      e.stopPropagation();
      return false;
    });

    close.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });


    overlay.click(function() {
      overlay.hide();
      content.hide();
      return false;
    });

    $(window).resize(function() {
      var height = $(document).height() / 2 - content.height() / 2;
      var width = $(document).width() / 2 - content.width() / 2;
      content.css('marginTop', height);
      content.css('marginLeft', width);
    });

    $('body').append(template);
  };

})(jQuery, window);

$ = jQuery;

这是我的简单叠加版本。

Answer 3

jQuery tools 也有一个覆盖插件。挺好看的。

Answer 4

我一直对ThickBox 很幸运，但我也没有和其他任何人搞砸过。我喜欢那个，因为它易于实施。 Sript.aculo.us for ProtoType 也有很多很棒的叠加功能，但我有时觉得使用 ProtoType 有点笨拙……不过我个人的看法。

但是，我假设大多数 jQuery 覆盖的不同实现在框架中使用相同的底层函数，因此可能很难看到ThickBox 和 LightBox 之间的真正性能差异。 真正的评判者将是框架本身。

有几个网站可以比较各种 javascript 框架。 Here is one。我会开始在那里寻找，一旦你找到一个好的框架，然后专注于哪个覆盖插件最容易实现并具有你需要的功能。抱歉，我知道这并不能真正回答您的问题，但至少希望它有所帮助:)

Answer 5

遇到了这个问题，试图决定在我的新框架上使用什么。 Fancybox2 现在是非商业许可证，所以我真的很想被 colorbox 或其他替代品说服并节省一些便士，但我也遇到了这个链接http://jsperf.com/colorbox-vs-fancybox，看起来 colorbox 在性能比较中并没有获胜 - 不是很长拍摄 - 尽管此比较使用的是两者的过时版本