FancyBox和TwitterBootstrap modal？

对于最近的一个项目合并FancyBox和整体很满意。一位朋友推荐我将jQuery模态插件作为Twitter的Bootstrap框架的一部分。有没有人使用过这个插件并且可以评论？任何优点，缺点？FancyBox和TwitterBootstrap modal？

来源

2012-05-01 eco_bach

那么对于利弊我不得不说，因为它已经包含在引导你保持一致的风格在整个网站，而不需要重修改，或根本没有。 Bootstrap模式插件利用CSS3转换来提供效果，从而增加性能并进一步提升性能，加上其小巧的体积，它是一个非常快速的解决方案。 Bootstrap模式使用起来很简单，并且有很好的文档记录，所以你不会迷路。

有什么缺点？那么你无法控制模式的宽度和位置，因为它是用CSS放在一个固定的容器中的，所以你必须修改css以适应你的需要，当你需要多种不同的尺寸时，这会变得很难看模式来加载你的页面。无法对js或css进行大量修改，无法在屏幕上垂直/水平居中。你不能轻易地加载任何其他媒体，如iframes/videos/images，而不需要黑客或不是什么。我之前提到过引导模式带来的额外好处和性能，因为使用CSS3过渡效果，这是一把双刃剑，因为旧的浏览器不支持这些方法，因此没有演示效果。说到效果，现在只有一个，这是一个幻灯片淡入淡出的效果，所以没有太多的选择（没有什么大不了的，但我想到了）。

我会去用的fancybox，您更划算，引导模式插件还非常多，年轻，在以后的版本会赶上休息。

来源

2012-05-01 15:45:55

感谢，猜测，概括起来 –

优点为的fancybox：

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

优点为引导：

免费用于商业用途 - Apache许可证2.0，而2.X的fancybox是 CC BY-NC 3.0许可。
已包含在我们大部分的项目中。
非常容易修改和扩展，因为我们需要。
持续和一致的更新。
清洁代码。 fancybox代码充满了不好的做法（浏览器代理嗅探，使用折旧的jQuery调用，bug越早的IE支持）。
使用CSS巨资为广大繁重的工作，使其更顺畅，更小，更快。
非常容易控制模式的整体外观，因为它是由 CSS控制。

或许已经引导自显著然而五月，改，因为我已经使用它，因为2012年八月以来，我能说什么最安德烈斯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“视网膜监视器堆叠的所有样品垂直或更少）

来源

2013-02-15 18:09:27

我想你的代码，它不工作。你可以在jsfiddle中做一个例子吗？ – Philip007

下面是一个快速的jsfiddle：http://jsfiddle.net/E5pjU/我更新了引导版本3的一些样式，这对于版本2也不是必需的。 –

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

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

而且，你不必保持标题和按钮栏。正如您将在此lynda.com视频中看到（可供subsc肋骨），省略它们可以给你一些相当不错的全屏照片缩放行为。

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

来源

2013-10-16 22:45:09