是否可以使materialize.css模式更大并删除垂直滚动条？

Question

我刚刚创建了一个按钮,一旦点击就会弹出一个模态,每个按钮都有一个显示不同运动gif的模态.但是模态太小而且它阻止用户看到整个gif,迫使它们向下滚动.我想删除滚动条并使模态更大,以便用户可以看到整个gif.任何帮助都会很棒,这是我的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-我创建了6个具有不同id的单击函数,这是其中一个的示例,如果需要整个代码,请查看我的codepen

$("#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 { width: 75% !important  }  /* increase the width as per you desire */

要增加模态的高度,请增加.modal类的最大高度,如下所示

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

为了更加自定义,您应该将其作为自定义css放在单独的css表中,如mycustomstyles.css,并将其作为标题中的最后一个样式表加载.

这是codepen - https://codepen.io/anon/pen/LGxeOa