Ist es möglich, das materialize.css Modal größer zu machen und die vertikale Bildlaufleiste zu entfernen?

Question

ich gerade erstellt Tasten, die eine modale erscheint einmal angeklickt und jede Taste hat eine modale, die eine andere Übung gif zeigt. Die Modale sind jedoch zu klein und es verhindert, dass der Benutzer das gesamte gif sieht und sie dazu zwingt, nach unten zu scrollen. Ich möchte die Bildlaufleiste entfernen und das Modal so vergrößern, dass der Benutzer das ganze gif sehen kann. Jede Hilfe wäre toll, hier ist mein 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- Ich habe 6 auf Klick-Funktionen mit unterschiedlichen ids, dies ist ein Beispiel für eine von ihnen, siehe meine codepen wenn Sie brauchen der gesamte Code

$("#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

ja, Sie leicht eingestellt werden, was verlangen.

die Breite des modal zu erhöhen, stellt nur die Breite der .modal Klasse

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

die Höhe des modal zu erhöhen, die maximale Höhe der .modal Klasse erhöhen, wie so

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

zum Scrollen des modalen zu verhindern, fügen Sie einfach die Eigenschaft Überlauf-y: zum modalen Klasse versteckt, wie so

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

Für mehr Anpassbarkeit sollten Sie dies als eine benutzerdefinierte css in einem separaten CSS-Blatt wie mycustypesyles.css und laden Sie diese als das letzte Stylesheet in Ihrer Kopfzeile.

Hier ist der Codepen - https://codepen.io/anon/pen/LGxeOa