2015-12-26 16 views
7

Sadece bir kez tıklandığında bir modal açılan düğmeler oluşturdum ve her düğmenin farklı bir egzersiz gifini gösteren bir mod vardır. Ancak, modalar çok küçüktür ve kullanıcının tüm gifleri görmesini engellemekte ve onları aşağı kaydırmaya zorlamaktadır. Kaydırma çubuğunu kaldırmak ve modal boyutunu büyütmek, böylece kullanıcının tüm gif'i görmesini sağlamak istiyorum. Eğer gerekiyorsa Herhangi bir yardım burada codepen https://codepen.io/anon/pen/gPwvedMateryalize.css modelini büyütmek ve dikey kaydırma çubuğunu kaldırmak mümkün mü?

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> 

olduğunu çok iyi olurdu jQuery farklı kimliği ile 'tık fonksiyonları üzerine 6 oluşturulan, bu onlardan birinin bir örnektir, benim codepen bakınız

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

cevap

18

Evet, istediğiniz her şey kolayca ayarlanabilir.

çok

gibi .modal sınıfının maksimum yüksekliğini artırmak, sadece modal yüksekliğini artırmak için .modal sınıf

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

genişliğini ayarlamak, modal genişliğini arttırmak böylece

.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. */ 
gibi modal sınıfa gizli:
.modal { width: 75% !important ; max-height: 100% !important } /* increase the width and height! */ 

modal kaydırma önlemek için, sadece mülkiyet taşma-y eklemek

Daha fazla özelleştirme için bunu mycustomstyles.css gibi ayrı bir css sayfasındaki özel bir css olarak koyup bunu başlığınızdaki son stil sayfası olarak yüklemelisiniz.

( https://codepen.io/anon/pen/LGxeOa)
İlgili konular