Question

我已经使用了lightbox和fancybox，但从来没有真正看到任何理由选择一个而不是另一个。还有一大堆我没有像这些http://planetozh.com/projects/lightbox-clones/那样使用。该页面上的数据非常陈旧，在许多情况下都是不正确的。

有没有充分理由选择其中一个？性能，API选项，易于定制等。

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

修改看完建议之后，我认为fancybox拥有最好的api，它只有5kb gzip。 http://fancybox.net/api Colorbox看起来也很不错。

可用性提示：如果您想从焦点窃取覆盖中捕获用户输入则不会。如果用户需要查看父窗口上的信息以填写表单，现在它们就会被困住。有时这些弹出窗口是合适的，但大多数情况下，滑动块元素可以更好地完成工作。

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好运，但我也没有和其他任何人搞混。由于易于实施，我喜欢那个。 ProtoType的Sript.aculo.us也有很多令人敬畏的覆盖功能，但我有时觉得ProtoType有点笨拙地使用...我的个人意见。

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

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

Answer 5

遇到这个问题，试图决定在我的新框架上使用什么。 Fancybox2现在是非商业许可证所以我真的很想通过colorbox或其他替代方案来说服并节省一些便士，但我也遇到了这个链接http://jsperf.com/colorbox-vs-fancybox并且看起来colorbox没有在性能比较上获胜 - 而不是远景 - 虽然这种比较使用了过时版本的

哪个jquery重叠库最好？

5 个答案: