Esiste la possibilità di correggere la finestra modale per l'interfaccia utente jQuery, quindi quando l'utente utilizza lo scroller sul lato destro, il lato dietro scorre, ma la finestra modale rimane fissa ?La finestra di dialogo modale UI jQuery deve essere fissata sullo scorrimento
Creare una classe CSS con la posizione fissa:
.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}
quindi aggiungere la classe come parte delle opzioni quando si crea la finestra di dialogo:
$(".selector").dialog({ dialogClass: 'fixed-dialog' });
Ecco un esempio di lavoro: http://jsfiddle.net/3hrSv/ L'esempio non è troppo appariscente perché non ho potuto ottenere jsfiddle per disegnare la finestra di dialogo.
Se volete centrare la finestra di dialogo al centro dello schermo, provare a impostare top:50%; left:50%; nel CSS come suggerito da: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/
Se si desidera che tutte le finestre di dialogo per avere questo comportamento, è possibile modificare la jquery.ui.dialog.css file.
Cambio:
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
A:
.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }
o, se si desidera conservare il file originale, basta aggiungere la riga:
div.ui-dialog {position:fixed;}
a uno dei tuoi css file a cui fa riferimento la pagina, o il blocco di stile sulla pagina.
Questa è una vecchia domanda, ma ho trovato che la risposta di James (per rivedere il div.ui-dialog di JQuery in posizione: fixed) forniva metà della risposta a questa domanda. L'altra metà è questa: assicurati che l'altezza dell'elemento genitore sia al 100%. Nel mio caso, il corpo è il genitore ai miei dialoghi, quindi non ho questa linea:
<body style='height: 100%; min-height: 100%;'>
Questo, oltre a James suggerimento per aggiungere questo al mio file CSS:
div.ui-dialog {position:fixed;}
... finalmente ho le mie finestre di dialogo per apparire al centro della finestra del browser e rimanere lì mentre faccio scorrere. Spero che questo aiuti i futuri googler che potrebbero passare qui.
o di applicare il CSS al momento della creazione:
$("#Modal").dialog({
autoOpen: false,
width: 500,
height: 'auto',
position: [50, 150],
create: function (event) {
$(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
}
});
stile aggiunto a giocherellare: http://jsfiddle.net/3hrSv/2/ –
Ok, ma il layoer non sarà centrato. Rimarrà 50px in alto e 50 px in sinistra, ma questo non è il centro. Come centrarlo? –
Niko Nik Ho aggiornato la mia risposta per gestire il centraggio, non avevo capito che volevi tenerlo centrato. –