materialize.cssモーダルを大きくし、垂直スクロールバーを削除することはできますか？

Question

私はちょうどクリックされたモーダルをポップアップするボタンを作成しました。そして、各ボタンは、異なる運動gifを示すモーダルを持っています。しかしモーダルは小さすぎるため、gif全体を見ることができなくなり、下にスクロールすることになります。私は、スクロールバーを削除し、ユーザがgif全体を見ることができるようにモーダルを大きくしたい。すべてのヘルプはあなたが必要な場合は、私のcodepenを参照してください、ここで私はIDが異なるとクリック機能に6を作成した私のcodepen https://codepen.io/anon/pen/gPwved

HTML

<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <h4></h4> 
     <p></p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
    </div> 

jQuery-が、これはその一つの例ですが、素晴らしいことですコード全体

$("#chest").on("click", function() { 
     $("h4").html("Bench Press"); 
     $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>"); 
     $("#modal1").openModal("show"); 
    }); 

Answer 1

はい、あなたが求めるものは簡単に設定できます。

はそう

のように、.modalクラスの最大の高さを増加させ、ちょうどモーダルの高さを高めるために.modalクラス

.modal { width: 75% !important } /* increase the width as per you desire */ 

の幅を調整し、モーダルの幅を大きくするにはそう

.modal { width: 75% !important ; max-height: 100% !important ; overflow-y: hidden !important ;} /* increase the width, height and prevent vertical scroll! However, i don't recommend this, its better to turn on vertical scrolling. */ 

のように、モーダルクラスに隠さ：

.modal { width: 75% !important ; max-height: 100% !important } /* increase the width and height! */ 

モーダルのスクロールを防止するためには、単にプロパティオーバーフロー-Yを追加よりcustomisabilityについては

、あなたはmycustomstyles.cssのような個別のCSSシートにカスタムCSSとしてこれを入れて、あなたのヘッダーの最後のスタイルシートとしてこれをロードする必要があります。

コードネームは次のとおりです。 - https://codepen.io/anon/pen/LGxeOa