読者です 読者をやめる 読者になる 読者になる

【bootstrap】モーダルが画面からはみ出ないようにサイズ調整する

はじめに

bootstrapのモーダル使っててモーダルサイズが画面からはみ出るのが嫌だったので修正したときのメモ。
今回やったのは以下の2パターン
・テキストベースのモーダル
・画像を大きく表示するための画像ベースのモーダル

テキストベースのモーダル

修正前
f:id:yoppy0066:20170317004307g:plain

修正後
f:id:yoppy0066:20170317004400g:plain

修正後のHTML

<script>
function showModal() {
  $(".modal-content").css({
    "height": $(window).height() - 75,
    "overflow-y": "auto"
  });
  $("#myModal").modal("show");
}
</script>

・・・

<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">                                                                                                                                                                                     
        テキスト                                                                                                                                                                                                   
        テキスト                                                                                                                                                                                                   
        テキスト                                                                                                                                                                                                   
        ・・・                                                                                                                                                                                                     
      </div>                                                                                                                                                                                                       
    </div>                                                                                                                                                                                                         
  </div>                                                                                                                                                                                                           
</div>
画像ベースのモーダル

修正前
f:id:yoppy0066:20170317004435g:plain

修正後
f:id:yoppy0066:20170317004502g:plain

修正後のHTML

<script>
 function showModal() {
     var height = $(window).height() - 150;
     $("#image").css("max-height", height);
     $("#myModal").modal("show");
 }
</script>                                                                                                                                                                                                          

<div class="modal fade" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img id="image" class="img-responsive" style="margin:0 auto;" src="./sample.png"/>
      </div>
    </div>
  </div>
</div>

無理やりだけどcssでやりかたわからなかったのでjqueryで。
もっと簡単なやり方教えてください。以上です。