FancyBox和TwitterBootstrap modal？

Question

對於最近的一個項目合併FancyBox和整體很滿意。一位朋友推薦我將jQuery模態插件作爲Twitter的Bootstrap框架的一部分。有沒有人使用過這個插件並且可以評論？任何優點，缺點？

Answer 1

那麼對於利弊我不得不說，因爲它已經包含在引導你保持一致的風格在整個網站，而不需要重修改，或根本沒有。 Bootstrap模式插件利用CSS3轉換來提供效果，從而增加性能並進一步提升性能，加上其小巧的體積，它是一個非常快速的解決方案。 Bootstrap模式使用起來很簡單，並且有很好的文檔記錄，所以你不會迷路。

有什麼缺點？那麼你無法控制模式的寬度和位置，因爲它是用CSS放在一個固定的容器中的，所以你必須修改css以適應你的需要，當你需要多種不同的尺寸時，這會變得很難看模式來加載你的頁面。無法對js或css進行大量修改，無法在屏幕上垂直/水平居中。你不能輕易地加載任何其他媒體，如iframes/videos/images，而不需要黑客或不是什麼。我之前提到過引導模式帶來的額外好處和性能，因爲使用CSS3過渡效果，這是一把雙刃劍，因爲舊的瀏覽器不支持這些方法，因此沒有演示效果。說到效果，現在只有一個，這是一個幻燈片淡入淡出的效果，所以沒有太多的選擇（沒有什麼大不了的，但我想到了）。

我會去用的fancybox，您更划算，引導模式插件還非常多，年輕，在以後的版本會趕上休息。

Answer 2

優點爲的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「視網膜監視器堆疊的所有樣品垂直或更少）

Answer 3

我在這裏爲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