5

对于最近一个包含 FancyBox 的项目，总体上我很满意。一位朋友建议我将 jQuery modal 插件视为 Twitter 的 Bootstrap 框架的一部分。有没有人用过这个插件并且可以发表评论？有什么好处，坏处吗？

4

3 回答 3

6

对于专业人士来说，我不得不说，由于它已经包含在引导程序中，您可以在整个站点中保持一致的风格，而无需进行大量修改，或者根本不需要修改。bootstrap modal 插件利用 CSS3 转换来提供效果，从而增加和额外的性能提升，再加上它的小尺寸，它是一个非常快速的解决方案。引导模式使用起来很轻松，并且有据可查，因此您不会迷路。

有什么缺点？好吧，您无法控制模态框的宽度和位置，因为它使用 CSS 定位在一个固定容器中，您必须修改 CSS 以使其适应您的需要，当您需要多个不同大小时，这可能会变得很难看模态加载到您的页面。如果不对 js 或 css 进行大量修改，就不能在屏幕上垂直/水平居中模式。到目前为止，您还不能轻松加载任何其他媒体，例如 iframe/视频/图像，而无需 hack 或其他什么。我之前提到了引导模式通过使用 CSS3 过渡效果带来的额外好处和性能引导，这是一把双刃剑，因为旧浏览器不支持这些方法，因此没有演示效果。说到效果，

我会选择fancybox，物有所值，引导模式插件仍然很年轻，在未来的版本中它将赶上其余的。

于 2012-05-01T15:45:55.077 回答
5

花式盒子的优点：

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

引导程序的优点：

  • 免费用于商业用途 - Apache 许可证 2.0，而 Fancybox 2.x 是 CC BY-NC 3.0 许可的。
  • 已经包含在我们的大多数项目中。
  • 根据需要修改和扩展非常简单。
  • 持续和一致的更新。
  • 更干净的代码。花式框代码充满了不良做法（浏览器代理嗅探、使用贬值的 jQuery 调用、有缺陷的旧版 IE 支持）。
  • 在大部分繁重的工作中大量使用 CSS，使其更平滑、更小、更快。
  • 由于它是由 CSS 控制的，因此非常容易控制模态框的整体外观。

也许自 5 月以来 bootstrap 发生了显着变化，但是，自从我从 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" 视网膜显示器堆叠垂直或更少）。

于 2013-02-15T18:09:27.397 回答
1

我会在这里为 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

于 2013-10-16T22:45:09.350 回答