2012-10-17 18 views
7

Sto usando un plugin jQuery chiamato ColorBox e fondamentalmente crea un modal jquery ma il modal ha un'altezza di dimensione fissa di "500" e voglio che abbia un'altezza minima, ma ho anche dei menu in espansione all'interno del modale vorrebbe espandere automaticamente. Come faccio a fare questo?
Il codice ho attualmente è:
Come rendere Auto Altezza su Colorbox?

$(".colorboxlink1").colorbox({ 
    opacity:"0.2", 
    width:"450", 
    height:"500", 
    title:"To close this dialog click X icon at the right", 
    iframe:true 
}); 

Iv provato a cancellare l'altezza da questo e usando i CSS, ma che non ha funzionato. Iv ha provato a mettere in questa linea quello che so di jquery, ma niente sembra funzionare, tuttavia sono abbastanza nuovo per jQuery. Qualcuno ha qualche idea?

risposta

17

È possibile utilizzare questo:

$('.colorboxlink1').colorbox({ 
    onComplete : function() { 
     $(this).colorbox.resize(); 
    }  
}); 

E questo nel codice dopo colorbox è stato inizializzato:

$.colorbox.resize(); 
+0

che cerca di lavoro, sembra mostrare solo la metà del windo modale w però. Continuerò a giocare e vedrò cosa posso modificare. – Ben

+0

Provato anche questo e il mio colorbox ridimensiona a 0px altezza – user1380540

+0

Bello!, Funziona come un fascino !! – Irfan

1

ho avuto una situazione simile e ho usato una funzione setTimeout per dare un po 'di tempo per il caricamento della colorbox, chiamato quindi il metodo di ridimensionamento.

ho chiamato il colorbox

var profileHeight=jQuery('#profile').height(); //Get the height of the container  
    setTimeout(function(){ 
     jQuery.colorbox({ 
      html:jQuery('#profile').html(), 
      width:'50%', 
      height:profileHeight, 
      opacity:0.5})} 
     , 600); 
//Wait 700ms then resize 
setTimeout(function(){jQuery(this).colorbox.resize();},700); 

che mi ha la funzionalità di cui avevo bisogno. La finestra modale ridimensiona sempre al contenuto del contenitore

0

Utilizzando la versione corrente di ColorBox, è possibile specificare le dimensioni massime in percentuale:

$(".colorboxlink1").colorbox({ 
    maxWidth: '95%', 
    maxHeight: '95%' 
}); 
0

è possibile associare un evento come questo quindi chiamare ridimensionare:

$(document).bind('cbox_complete', function() { 
    $.colorbox.resize(); 
}); 

look per 'ganci eventi' per vedere cos'altro è possibile associare a qui: http://www.jacklmoore.com/colorbox/

Problemi correlati