Uno sviluppatore Web può sfruttare la tecnica modale finestra pop-up per la presentazione dei contenuti ai visitatori del suo sito. Queste finestre modali sono una strategia di progettazione Web 2.0 comunemente utilizzata. Tuttavia, quando viene visualizzata una finestra modale su più pagine di contenuto dello sfondo, l'utente può scorrere la finestra modale fuori dallo schermo scorrendo verso il basso. Poiché molte finestre modali causano parzialmente sfumare lo sfondo, l'utente potrebbe potenzialmente scorrere pagine di testo parzialmente sbiadito. Utilizzando il metodo .css() di jQuery, uno sviluppatore Web può nascondere questo overflow e tenere la finestra modale centrata sullo schermo.

Istruzioni

1

Incorporare il jQuery e gli script finestra modale. Questo esempio utilizza la finestra modale conferma da jQuery UI Plug-in. La finestra modale di esempio è stata disegnata con tema di cupertino di jQuery UI. Tutto il codice è disponibile da API gli sviluppatori di Google:

< link href = "l'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text/css" / >

< script) .dialog({

Resizable: falso,

Altezza: 140,

modale: vero,

pulsanti: {

"Eliminare tutti gli elementi": function () {

$(questo) .dialog ("close");

},

Annulla: function () {

$(questo) .dialog ("close");

}

}

});

});

& lt; / script > 3

Scrivere il codice HTML. La finestra di dialogo-confermare div corrisponde al codice di dimostrazione utilizzato dall'implementazione della finestra di dialogo di jQuery UI modale conferma:

< corpo >

< p > un sacco di sfondo testo va qui </p >

< div id = "finestra di dialogo conferma" title = "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 di jQuery per nascondere il contenuto in eccesso. Quando viene attivata la finestra di dialogo è necessario utilizzare il metodo .css() di jQuery per modificare la proprietà overflow dell'elemento corpo su hidden. Questo nasconde tutto il contenuto in eccesso sfondo ogni volta che viene visualizzata la finestra modale. È importante utilizzare il metodo .css() per ripristinare la proprietà overflow dell'elemento corpo per scorrere una volta che la finestra modale viene chiusa dall'utente. In questo esempio si espande il codice jQuery per nascondere l'overflow su attivazione e successivamente ripristinare la barra di scorrimento ogni volta che l'utente fa clic su un pulsante e chiude la finestra:

<script>

$(function() {

$( "#dialog-confirm" ).dialog({

resizable: false,

height:140,

modal: true,

buttons: {

"Delete all items": function() {

$('body').css('overflow','scroll');

$( this ).dialog( "close" );

},

Cancel: function() {

$('body').css('overflow','scroll');

$( this ).dialog( "close" );

}

}

});

$('body').css('overflow','hidden');

});

</script>

Consigli & Avvertenze

• Una volta inseriti all'interno dei tag corretto, l'esempio completo di codice di esempio viene visualizzato come segue:
• <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "l'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
• < html xmlns = "l'http://www.w3.org/1999/xhtml" >
• < head >
• < meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/ >
• < title > esempio di finestra di dialogo modale < / title >
• < link href = "l'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel = "stylesheet" type = "text/css" / >
• < script src = "l'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" >< / script >
• < script src = "l'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" >< / script >
• < script >
• $(function() () {
• $("#dialog-confermare") .dialog({
• Resizable: falso,
• Altezza: 140,
• modale: vero,
• pulsanti: {
• "Eliminare tutti gli elementi": function () {
• $(questo) .dialog ("close");
• },
• Annulla: function () {
• $('body').css('overflow','scroll');
• $(questo) .dialog ("close");
• }
• }
• });
• $('body').css('overflow','hidden');
• });
• < / script >
• < / head >
• < corpo >
• < p > un sacco di testo qui. </p >
• < div id = "finestra di dialogo conferma" title = "Svuotare il Cestino?" >
• < p >< span class = "ui-icona dell'interfaccia utente-icona-avviso" style = "float: left; margin: 0 7px 20px 0; " >< / span > questi elementi verranno eliminati definitivamente e non possono essere recuperati. Sei sicuro? </p >
• < / div >
• < / body >
• < / html >
• Alcune versioni meno recenti dei browser Internet Explorer possono richiedere l'attributo height dell'elemento del corpo per essere impostato prima della creazione di un'impostazione di overflow. Se è importante la conformità con le versioni precedenti con browser meno recenti, si può prendere in considerazione avvolgendo il contenuto di tutto il corpo all'interno di un div e utilizzando il metodo .css() per modificare le proprietà di overflow di questo div quando viene visualizzato il modal.