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，并将其作为标题中的最后一个样式表加载。

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

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

1 个答案: