FancyBox vs TwitterBootstrap模式？

Question

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

Answer 1

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

有什么缺点？那么你无法控制模态的宽度和位置,因为它是用CSS定位在一个固定的容器里你必须修改css以便根据你的需要调整它,当你需要多个不同大小时这会变得很难看要在页面中加载的模态.如果不对js或css进行大量修改,则无法在屏幕上垂直/水平居中显示模态.你不能轻易加载任何其他媒体,如iframes /视频/图像,而不需要黑客或什么不是.我之前提到过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"视网膜监视器的样本而言垂直或更小).