È ansible ingrandire la modalizza materialize.css e rimuovere la barra di scorrimento verticale?

Ho appena creato pulsanti che fanno apparire una modale dopo aver cliccato e ogni pulsante ha una modale che mostra una diversa gif di esercizi. Tuttavia le modali sono troppo piccole e impedisce all’utente di vedere l’intera gif, costringendole a scorrere verso il basso. Voglio rimuovere la barra di scorrimento e rendere la modale più grande in modo che l’utente possa vedere l’intera gif. Qualsiasi aiuto sarebbe fantastico, ecco la mia codepen https://codepen.io/anon/pen/gPwved

HTML

 

jQuery- Ho creato 6 funzioni di clic con ID diversi, questo è un esempio di uno di questi, vedi la mia codepen se hai bisogno dell’intero codice

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

    sì, ciò che richiedi può essere facilmente impostato.

    Per aumentare la larghezza del modale, basta regolare la larghezza della class .modal

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

    Per aumentare l’altezza del modale, aumentare l’altezza massima della class .modal, in questo modo

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

    Per impedire lo scorrimento del modale, basta aggiungere la proprietà overflow-y: nascosta alla class modale, in questo modo

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

    Per maggiore personalizzazione, dovresti inserire questo come un css personalizzato in un foglio css separato come mycustomstyles.css e caricarlo come ultimo foglio di stile nell’intestazione.

    Ecco la codepen – https://codepen.io/anon/pen/LGxeOa