May 21
scatole modali creare una cornice elegante per le vostre immagini, forme, o le finestre di dialogo, che si sovrappone la pagina Web, consentendo una perfetta integrazione di elementi interattivi che non prendono lo spettatore lontano dal contenuto della pagina. L'uso di uno sfondo opaco che copre l'intera finestra del browser fornisce una piacevole esperienza di visualizzazione e si concentra l'utente sul contenuto di ogni dialogo modale presenta. È possibile codificare un modale da soli, usando tecniche di HTML5 e CSS3 se avete la capacità, ma è molto più efficiente di fare un dialogo modale per il tuo sito web utilizzando uno di una varietà di eleganti script jQuery.
1 Scaricare uno script di dialogo modale come Facebox, Fancybox o prettyphoto. Determinare quale script da utilizzare per decidere cosa si vuole il dialogo modale per contenere. Facebox è ottimizzato per le forme, contenuti HTML e messaggi di testo semplice, mentre Fancybox e prettyphoto sono più adatti per la visualizzazione di gallerie di immagini, video o Flash. Copiare i componenti script scaricato nella cartella cartella principale o uno script del tuo sito web.
2 Aprire la home page in un editor di testo o WYSIWYG e seguire il file dello script "readme" per includere i componenti necessari nella testa del documento da copia-incollare il codice di esempio fornito appena sopra il tag "</ head>" nel codice HTML . Ad esempio, utilizzare il seguente codice per includere Facebox e la sua biblioteca jQuery dipendente, ammesso che è stato copiato in una cartella "js" nella root del sito:
<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 lo script scelto e copiare gli stili nel foglio di stile del tuo sito web. È possibile modificare gli stili in qualsiasi modo lo si desidera, e comprendono la grafica personalizzata, purché si aggiornano i percorsi delle immagini per la posizione in cui le immagini verranno memorizzate sul server Web.
4 Aggiungere l'attributo di collegamento necessario per gli elementi che si desidera avere lanciare il dialogo modale. Questo attributo è definito nella documentazione di sceneggiatura, e di solito è così semplice come l'aggiunta di un "id" o il valore "rel" al tuo link markup. Ad esempio, per creare una finestra di dialogo con Facebox, si utilizza un attributo "rel" con un valore di "Facebox" nel tuo link:
<a href="images/stairs.jpg" rel="facebox"> Questa è la vostra finestra di testo. </a>
Utilizzare "prettyphoto" come valore "rel" se si utilizza lo script prettyphoto per visualizzare le immagini. Per esempio:
<a href="images/stairs.jpg" rel="prettyPhoto"> <img alt = "scale" /> </a>