Modal box creano un elegante telaio per immagini, forme o finestre di dialogo, che si sovrappone la tua pagina Web, consentendo per la perfetta integrazione di elementi interattivi che non accettano il visualizzatore dal contenuto della pagina. L'uso di uno sfondo opaco che abbracciano l'intera finestra del browser offre un'esperienza di piacevole visione e si concentra l'utente sul contenuto che presenta ogni casella modale. È possibile codificare un modale da soli, usando tecniche HTML5 e CSS3, se avete l'abilità, ma risulta molto più efficiente per fare una scatola modale per il tuo sito utilizzando uno di una varietà di script jQuery elegante.
Istruzioni
1
Scaricare uno script di casella finestre modali come Facebox, FancyBox o PrettyPhoto. Determinare quale script utilizzare decidendo cosa vuoi finestra modale per contenere. Facebox è ottimizzato per i moduli, messaggi di testo semplice e contenuto HTML, mentre FancyBox e PrettyPhoto sono più adatti per la visualizzazione di gallerie di immagini, video o Flash. Copiare i componenti di script scaricato nella cartella principale del tuo sito Web o una cartella di script.
2
Aprire la home page in un testo o un editor WYSIWYG e seguire il file "readme" dello script per includere i componenti necessari nella testa del vostro documento di copia-incolla il codice di esempio fornito appena sopra il tag "< / head >" nel codice HTML. Ad esempio, utilizzare il codice seguente per includere Facebox e la libreria jQuery dipendente, supponendo che è stato copiato in una cartella "js" nella directory principale del sito Web:
< script type = "text/javascript" >< / script >
< script type = "text/javascript" >
jQuery(document).ready(function($) () {
$('a[rel*=facebox]').facebox()
})
< / script >
3
Aprire il foglio di stile CSS incluso con il tuo script selezionate e copiare gli stili nel foglio di stile del tuo sito Web. È possibile modificare gli stili in qualsiasi modo si desidera e includonoGrafica grafica personalizzata, purché si aggiorna i percorsi delle immagini nella posizione di cui verranno memorizzate le immagini sul server Web.
4
Aggiungere l'attributo di collegamento richiesto agli elementi che si desidera avere aprire la finestra modale. Questo attributo è definito nella documentazione di script ed è solitamente semplice come aggiungere un valore di "id" o "rel" al link markup. Ad esempio, per creare un dialogo con Facebox, si utilizza un attributo "rel" con un valore di "facebox" nel tuo link:
< un href="images/stairs.jpg" rel = "facebox" > questa è la finestra di dialogo testo. < /a >
Utilizzare "prettyPhoto" come il valore di "rel" Se utilizzando lo script Prettyphoto per visualizzare le immagini. Per esempio:
< un href="images/stairs.jpg" rel = "prettyPhoto" >< img alt = "scale" / >< /a >
Consigli & Avvertenze
- Assicurarsi che lo script viene caricato su ogni pagina in cui si desidera la finestra modale per essere utilizzato, se lo script di esecuzione in un sito che utilizza separato HTML documenti per ogni pagina.