在 Bootstrap 中使用模態框時如何防止主體滾動？

在模態顯示期間防止正文滾動

使用Twitter 的Bootstrap 框架中的Modal 時，您可能會遇到以下問題：當模式對話方塊已開啟。這可能會讓使用者感到沮喪。

解

當顯示模態框時，Bootstrap 會自動在正文中加入一個類別「modal-open」。您可以透過在樣式表中新增 CSS 規則來利用此功能：

這將防止模式開啟時正文滾動。

引導程式版本注意事項

請注意，此解決方案根據您的 Bootstrap 版本有限制。

• Bootstrap 2.3.0 及更高版本： Twitter Bootstrap 刪除了「modal-open」在此版本中，來自正文的類別。

  • 解決方法：您可以在模式開啟時手動新增該類，並在模式關閉時將其刪除。這可以使用jQuery 來實現，如下所示：
• Bootstrap 3.0: “modal-open”類別預計在3.0 版本中明確返回

IE 相容性

請注意，正如您所提到的，該解決方案與IE7 相容。

以上是在 Bootstrap 中使用模態框時如何防止主體滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！