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

我刚刚创建了一个按钮,一旦点击就会弹出一个模态,每个按钮都有一个显示不同运动gif的模态.但是模态太小而且它阻止用户看到整个gif,迫使它们向下滚动.我想删除滚动条并使模态更大,以便用户可以看到整个gif.任何帮助都会很棒,这是我的codepen https://codepen.io/anon/pen/gPwved

HTML

 

    

      

      

    
    

      Agree
    
  

jQuery-我创建了6个具有不同id的单击函数,这是其中一个的示例,如果需要整个代码,请查看我的codepen

$("#chest").on("click", function() {
       $("h4").html("Bench Press");
        $("p").html("");
        $("#modal1").openModal("show");
    });

Shyam Prasad.. 23

是的,您可以轻松设置所需的内容.

要增加模态的宽度,只需调整.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

是的,您可以轻松设置所需的内容.

要增加模态的宽度,只需调整.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