Bootstrap 3 - 根據屏幕大小設置模式窗口的高度

我正在嘗試使用Bootstrap 3模式對話框創建一種響應式megamenu。我想將整個模式窗口的寬度和高度設置爲視口的80％，同時將模態主體設置爲最大高度，以便不在大視口上填充整個屏幕。Bootstrap 3 - 根據屏幕大小設置模式窗口的高度

我的HTML：

<div class="modal fade"> 
      <div class="modal-dialog modal-megamenu"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
         <h4 class="modal-title">Modal Mega Menu Test</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="row"> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
          <div class="col-md-3"></div> 
         </div> 
        </div> 
       </div> 
        <div class="modal-footer"> 
         <button type="button" data-dismiss="modal" class="btn btn-primary">close</button> 
        </div> 
      </div> 
     </div>

我的CSS：

.modal-megamenu { 
    width:80%; 
    height:80%; 
} 

.modal-body { 
    max-height:500px; 
    overflow:auto; 
}

這可以作爲用於寬度，但「高度」參數沒有給出任何結果。像這樣，模態窗口的高度始終設置爲最大高度值。有沒有人知道如何根據視口高度動態設置高度？

來源

2013-10-02 Ralf Glaser

我假設你正在尋找類似於此的東西 - > http://jsfiddle.net/KanvL/1/ – Morpheus

嘗試：

$('#myModal').on('show.bs.modal', function() { 
$('.modal-content').css('height',$(window).height()*0.8); 
});

來源

2013-11-18 20:46:19

只是爲了澄清，這只是需要在'.modal（'show'）'命令之前if這是用過的。 – Dean

這是一個很好的解決方案。只要不要忘記添加css（'overflow'，'auto'）以防萬一你的內容太大。 –

你介意解釋爲什麼神奇數字「0.8」？謝謝！ – renatoargh

類似低音，我只好也設置溢出-Y。這實際上可以在CSS

$('#myModal').on('show.bs.modal', function() { 
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7); 
});

來源

2014-05-06 20:49:55

工作得很好！感謝名單！ – TodStoychev

做才能擴大Ryand的答案，如果你使用Bootstrap.ui，這對你的模式，例如將這樣的伎倆：

modalInstance.rendered.then(function (result) { 
     $('.modal .modal-body').css('overflow-y', 'auto'); 
     $('.modal .modal-body').css('max-height', $(window).height() * 0.7); 
     $('.modal .modal-body').css('height', $(window).height() * 0.7); 
    });

來源

2016-03-17 17:39:19 Tiago

純CSS解決方案，使用calc

.modal-body { 
    max-height: calc(100vh - 200px); 
    overflow-y: auto; 
}

200像素可以根據對標題&頁腳的高度來調節

來源

2016-07-29 09:20:08

優秀的答案，完美的作品。請記住檢查瀏覽器支持（http://caniuse.com/#search=calc），並非所有版本都支持它。 – Backer

我想，這個答案是基於2年前[這裏]（http://stackoverflow.com/a/23324116/2091181）這篇原文。 –

兒子的....我一直在做窗口調整大小的聽衆在JS爲*如何*長？！？我不知道「vh」單元是否存在。非常感謝！ –

我假設你希望在手機上儘可能多地使用屏幕空間。我已經做了一個插件來解決在手機上引導模式的這個用戶體驗問題，你可以在這裏查看 - https://github.com/keaukraine/bootstrap-fs-modal

所有你需要做的就是申請modal-fullscreen類，它的行爲類似於本機屏幕的iOS/Android的。

來源

2017-07-19 11:30:31 keaukraine

Bootstrap 3 - 根據屏幕大小設置模式窗口的高度

回答

相關問題