Sviluppatori web cercando di aggiungere un tocco unico all'interfaccia utente del loro sito Web possono impiegare un linguaggio di programmazione basato su Javascript conosciuto come jQuery. Finestre modali possono essere un buon modo per visualizzare piccoli frammenti di informazione agli utenti che interagiscono con il tuo sito Web o un'applicazione web. È anche possibile utilizzare finestre modali per visualizzare gli errori e richiedere all'utente di immettere informazioni aggiuntive. Ottenere la finestra modale per visualizzare è una questione di utilizzando il codice corretto e configurandolo correttamente per funzionare con il resto del tuo sito Web.

Istruzioni

1

Aprire il codice HTML della pagina web utilizzando una pagina Web codifica applicazione oppure un testo normale modifica applicazione, ad esempio Microsoft Notepad o TextEdit di Mac OS X.

2

Aggiungere la finestra modale al tuo sito Web utilizzando il codice riportato di seguito:

< centro >< h1 > finestra modale < / h1 >< / center >

< p >< una classe = 'activate_modal' name = 'first_window' href = '#' > finestra modale prima. < /a >< / p >

< div id = 'maschera' class = 'close_modal' >< / div >

< div id = 'first_window' class = 'modal_window' > questa è la prima finestra modale < / div >

Configurare i tag HTML nell'esempio precedente a vostro piacimento regolando il posizionamento e div id.

3

Aprire il file CSS che detta lo stile della pagina web nella stessa applicazione in modo che è possibile aggiungere gli stili CSS finestra modale, che sono essenziali a renderlo visualizzare:

.modal_window () {

position:absolute;
display:none;
color:white;

}

modal_window () {

padding:50px;
border:1px solid gray;
background: #246493;
color:black;

}

4

Aggiungere il codice di show_modal di jQuery che è in definitiva responsabile chiamando la finestra e permettendo così di visualizzare nel documento HTML del tuo sito Web:

Function show_modal(modal_id) () {

$('#mask').css({ 'display' : 'block', opacity : 0});
$('#mask').fadeTo(500,0.8);
$('#'+modal_id).fadeIn(500);

}

5

Salvare i file modificati di HTML e CSS per il tuo sito e poi caricarli all'ambiente di server web di produzione per salvare le modifiche e avviare la visualizzazione della finestra modale.