web-dev-qa-db-ja.com

materialize.cssをモーダルにして垂直スクロールバーを削除することは可能ですか？

クリックするとモーダルがポップアップするボタンを作成しました。各ボタンには、異なる運動gifを表示するモーダルがあります。ただし、モーダルが小さすぎるため、ユーザーがgif全体を表示できず、下にスクロールする必要があります。ユーザーがgif全体を表示できるように、スクロールバーを削除してモーダルを大きくしたいと考えています。どんな助けも素晴らしいでしょう、ここに私のコードペンがあります 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-私は6つのクリック関数を異なるIDで作成しました。これはそのうちの1つの例です。コード全体が必要な場合は、コードペンを参照してください。

$("#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");
    });
javascriptjqueryhtmlcssmaterialize
9
morizvi23

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

モーダルの幅を増やすには、.modalクラスの幅を調整するだけです

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

モーダルの高さを増やすには、次のように.modalクラスのmax-heightを増やします

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

モーダルのスクロールを防ぐには、次のように、プロパティoverflow-y：hiddenをモーダルクラスに追加します。

.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. */

よりカスタマイズしやすくするために、これをmycustomstyles.cssのような別のcssシートにカスタムcssとして置き、これをヘッダーの最後のスタイルシートとしてロードする必要があります。

これがコードペンです- https://codepen.io/anon/pen/LGxeOa

23
Shyam Prasad C.S