August 13
Uno sviluppatore Web può sfruttare la tecnica finestra pop-up modali per presentare i contenuti ai visitatori del suo sito. Queste finestre modali sono una strategia di progettazione Web 2.0 comunemente utilizzati. Tuttavia, quando viene visualizzata una finestra modale su più pagine di contenuti di fondo, l'utente può scorrere la finestra modale fuori dallo schermo facendo scorrere verso il basso. Dal momento che molte finestre modali causano lo sfondo a svanire in parte, l'utente potrebbe potenzialmente scorrere le pagine di testo parzialmente sbiadito. Utilizzando il metodo di jQuery css (), uno sviluppatore Web può nascondere questo troppo pieno e tenere la finestra modale al centro dello schermo.
1 Incorporare il jQuery e gli script di finestre modali. Questo esempio utilizza la finestra di conferma modale dal plug-in jQuery UI. La finestra di esempio modale è stata abbinata a tema Cupertino di jQuery UI. Tutto questo codice è disponibile presso API per gli sviluppatori di Google:
<Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text / css" />
<Script) .dialog ({
ridimensionabile: false,
altezza: 140,
modal: true,
pulsanti: {
"Eliminare tutti gli elementi": function () {
$ (This) .dialog ( "close");
},
Annulla: function () {
$ (This) .dialog ( "close");
}
}
});
});
& Lt; / script>
3 Scrivere il codice HTML. Il div dialogo-confirm corrisponde al codice dimostrativo utilizzato dalla finestra di conferma modale implementazione jQuery UI:
<Body>
<P> Un sacco di sfondo del testo va qui </ p>
<Div id = titolo di "dialogo-conferma" = "svuotare il cestino?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</ Div>
</ Body>
4 Modificare il codice jQuery per nascondere il contenuto in eccesso. Quando la finestra viene attivato è necessario utilizzare il metodo di jQuery .css () per cambiare proprietà overflow dell'elemento corpo di nascosto. Questo nasconde tutti i contenuti di fondo in eccesso ogni volta che viene visualizzata la finestra modale. È importante utilizzare il metodo .css () per ripristinare proprietà overflow dell'elemento corpo per scorrere una finestra modale viene chiusa dall'utente. Questo esempio amplia il codice jQuery per nascondere l'overflow sull'attivazione e successivamente ripristinare la barra di scorrimento ogni volta che l'utente fa clic su un pulsante e chiude la finestra:
<script>
$ (Function () {
$ ( "Dialogo-conferma #") .dialog ({
ridimensionabile: false,
altezza: 140,
modal: true,
pulsanti: {
"Eliminare tutti gli elementi": function () {
$ ( 'Body') css ( 'overflow', 'di scorrimento.');
$( this ).dialog( "close" );
},
Annulla: function () {
$ ( 'Body') css ( 'overflow', 'di scorrimento.');
$ (This) .dialog ( "close");
}
}
});
$ ( 'Body') css ( 'overflow', 'nascosto').;
});
& Lt; / script>