2012-02-06 10 views
7

Trovato un sacco di plugin per finestra modale, ho provato diverse opzioni di configurazione per alcuni come SimpleModal, LightBox ... questi sono leggeri e hanno una configurazione flessibile, ma mi manca una cosa: ho bisogno di essere in grado di scorrere la finestra modale (quando eccedere in altezza) con la barra di scorrimento del browser come la galleria di facebook modal, o l'anteprima del pin di pinterest.com, qualche suggerimento?Dove trovare il plugin per finestra modale "scorrevole" di jQuery?

risposta

4
$(window).scroll(function(){ 
    if($('#ux-dialog-test-container').dialog('isOpen') === true){ 
     var dialogHeight = $('.ui-dialog').height(); 
     var windowHeight = $(window).height(); 
     var documentHeight = $(document).height(); 
     var scrollLength = documentHeight - windowHeight; 
     var currentScrollTop = $(window).scrollTop(); 
     var scrollPercentage = currentScrollTop/scrollLength; 
     var pixelsToSubtract = dialogHeight * scrollPercentage; 
     var newTop = 32 - pixelsToSubtract; 
     $('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing'); 
    } 
}); 

So che questa una vecchia questione, ma ero alle prese con lo stesso problema e abbiamo trovato questo una soluzione adeguata. In pratica dà l'illusione di scorrere la finestra di dialogo modale, quando in realtà spinge la parte superiore più in alto mentre scorri verso il basso. Ho calcolato la percentuale di finestra scorsa e ho utilizzato quella percentuale per regolare la proprietà "top:" css. Nel mio caso ho avuto la parte superiore impostata su 32px, come potete vedere ho modificato per i miei calcoli. Spero che questo aiuti qualcuno da qualche parte!

OH! e questo, che ho rubato da un altro thread è necessaria in alcuni browser per sbloccare il rotolo (cioè in cromo l'evento click per la barra di scorrimento viene soppressa se modal: true)

if ($.ui && $.ui.dialog) { 
    $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' '); 
} 

So che questo funziona in IE8 + così come Chrome e FF.

MODIFICA: aggiunto controllo per vedere se la finestra di dialogo era aperta.

Problemi correlati