jqModal visualizzato in modo errato in Mobile Safari

Ho una finestra jQModal sul mio sito che ha il suo contenuto popolato da una chiamata Ajax. Funziona bene in tutti i browser desktop, ma non riesce in Mobile Safari su iPhone.jqModal visualizzato in modo errato in Mobile Safari

L'overlay e la finestra stessa vengono visualizzati nella parte superiore del corpo della pagina, anziché coprire la vista di iPhone. Se scorri verso l'alto, puoi vedere la finestra e la sovrapposizione posizionati come in qualsiasi altro browser. Questo è particolarmente problematico perché, per un utente di Mobile Safari, una volta che si scorre verso il basso e si fa clic per aprire la finestra modale, non c'è alcuna risposta - la parte dello schermo con la finestra modale è completamente invisibile all'utente.

Sono sicuro che ciò è dovuto al fatto che jqModal utilizza "position: fixed" nel suo CSS, che è effd sull'iPhone per vari motivi. Ecco un buon post sul blog che descrive il motivo: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Ho esaminato alcune delle altre librerie per Windows modale (come BlockUI) e hanno lo stesso problema in Mobile Safari. Qualcuno sa come modificare jqModal js/css per risolvere questo problema? Cheers

fonte

2009-06-12 alunny

Forse provare qualcosa del genere per posizionare il div modale?

Via Jon Brisbin

function showModal() { 
    var win_y = $(window).height(); 
    var scroll_y = $(window).scrollTop(); 
    $("#modal_div").css({ top: scroll_y + "px" }); 
} 

var showTimer = false; 
function maybeShowModal(evt) { 
    if (showTimer) { 
    clearTimeout(showTimer); 
    } 
    showTimer = setTimeout(showModal, 175); 
} 

$(window).bind("scroll", maybeShowModal);

fonte

2009-11-05 00:28:48

Grazie - che avrebbe bisogno di un po 'di modifica a lavorare con il plugin jqModal, ma usare la posizione di scorrimento è il modo migliore per andare qui. – alunny

Potrei aver bisogno di questo tipo di funzionalità in un'app Safari Mobile su cui sto lavorando. Una volta modificata la tua versione per funzionare con jqModal, ti dispiacerebbe postare qualche codice di esempio? –

sì, per favore, inserisci il codice di esempio –

Questa è una sorta di un hack, ma un lavoro dignitoso in giro. Sto vedendo jqmodal mettere il modale alla parte superiore della pagina, in modo da questo codice scorre semplicemente al top dopo aprono un modale:

if(navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPad/i) || 
    navigator.userAgent.match(/iPod/i) || 
    navigator.userAgent.match(/Android/i)){ 
    $('html, body').animate({scrollTop:0}, 'slow'); 
}

ho aggiunto questo alla funzione open in jqmodal.js

da provare le demo che vengono con SimpleModal, sembrano funzionare correttamente su iPad/iPhone in modo migrazione a che sarebbe un'altra soluzione: http://www.ericmmartin.com/projects/simplemodal/

fonte

2011-04-04 23:15:53

jqModal visualizzato in modo errato in Mobile Safari

risposta

Problemi correlati