Question

对于最近合并FancyBox的项目，整体而言我很满意。一位朋友建议我查看jQuery模式插件作为Twitter的Bootstrap框架的一部分。有没有人用过这个插件可以发表评论？任何优点，缺点？

Answer 1

对于专业人士而言，我必须说，因为它已经包含在引导程序中，所以您可以在整个站点中保持一致的样式，而无需进行大量修改，或者根本不需要。引导模式插件利用CSS3过渡来提供效果，从而增加和提升性能，再加上它的小尺寸，它是一个非常快速的解决方案。引导模式使用起来很轻松，并且记录良好，因此您不会迷路。

有什么缺点？那么你无法控制模态的宽度和位置，因为它是用CSS定位在一个固定的容器里你必须修改css以便根据你的需要调整它，当你需要多个不同大小时这会变得很难看要在页面中加载的模态。您无法对屏幕上的模态进行垂直/水平居中，而无需对js或css进行大量修改。您无法轻松加载任何其他媒体，例如iframe /视频/图片，而无需黑客或不需要。我之前提到过bootstrap模式通过使用CSS3过渡效果带来的额外好处和性能引导，这是一把双刃剑，因为旧浏览器不支持这些方法，因此没有演示效果。谈到效果，现在只有一个，这是一个幻灯片淡化效果，因此没有太多的选择（没什么大不了的，但我认为是这样）。

我选择fancybox，更多的是为了你的降压，引导模式插件仍然很年轻，在未来的版本中它将赶上其余的。

Answer 2

fancybox的优点：

它支持更多开箱即用的媒体。

引导程序的优点：

免费用于商业用途 - Apache License 2.0，而Fancybox 2.x是 CC BY-NC 3.0获得许可。
已经包含在我们的大多数项目中。
根据需要修改和扩展非常简单。
持续不断的更新。
清洁代码。 fancybox代码充满了不良做法（浏览器代理嗅探，使用折旧的jQuery调用，错误的旧IE支持）。
大量使用CSS来完成繁重的工作更光滑，更小，更快。
非常容易控制模态的整个外观，因为它是由CSS控制。

自5月以来，也许引导程序发生了重大变化，但自从我从2012年8月开始使用它以来，我可以说Andres llich所说的大部分内容都很难控制模式的宽度/高度/居中位置。要么离开了，要么更有可能他只是不太了解CSS。容器是您指定的容器，可以具有ID，并且您想要“覆盖”的任何CSS就像指定ID然后适当的类一样简单，例如：

#citymodal {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 80%;
    margin-left: -167px;
    width: 334px;
    padding-bottom: 40px;
    min-height: 150px;
}

这使得我们的城市模态宽334px，并且水平居中。我们可以轻松地将其垂直居中，但是这个特殊的盒子对客户端高度的响应（80％）并且总是大于它们的观察高度（对于所有“始终”小于8 + 30“视网膜监视器的样本而言垂直或更小）。

Answer 3

我在这里为Bootstrap投了一票。使用Bootstrap 3，有一些很好的响应功能，我做了一个POC，看看如何自定义默认Bootstrap模式的固定宽度。对于任何内容大小，它都能很好地工作。

http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

此外，您不必保留标题和按钮栏。正如您将在lynda.com视频中看到的那样（订阅者可以使用），省略它们可以获得一些非常漂亮的全屏照片缩放行为。

http://www.lynda.com/course20/Bootstrap-tutorials/Updating-modals/138156/144536-4.html

FancyBox vs TwitterBootstrap模式？

3 个答案: