            |
| FORUM | TUTORIALS | MAGAZINE | SERVIZI | VIDEO | NEWS | BLOG |
| ||
Pagina Intera Sovrapposizione FinestraAbraham Chaffin
Pagina intera finestra pop-up di sovrapposizione In questo tutorial vi spiegherà come creare una pagina intera finestra pop-up che le sovrapposizioni esistenti html pagina. Questa tecnica è utilizzata spesso per la visualizzazione di un video, Filmato, Immagine, O di forma, quando un utente fa clic su un elemento in una pagina web.
Vista esempio IntroduzioneQuesta tecnica non è una finestra pop-up, come si potrebbe pensare in generale. Non è una finestra separata del html browser che è stato aperto, ma piuttosto un div che le sovrapposizioni esistenti html pagina. Il div è semi-trasparente e crea un piacevole effetto che consente all'utente di sapere che si può tornare alla pagina da altri chiudendo la finestra (div) che è in cima.Dietro la realizzazione di questo metodo è piuttosto semplice:: Lo stato iniziale del font che sovrapposizione pagina è nascosta con nessun contenuto nella sua interiore html. Significa che inizialmente non vi è nulla tra i tag div apertura e la chiusura dei tag div e l'elemento ha un display di nessuno. Di avviare la visualizzazione del div è necessario, innanzitutto, scegliere e per l'elemento che un utente clicca su, Posiziona il mouse sopra, Etc. Di assegnare il comportamento di. Si potrebbe avere anche quando è iniziato il caricamento della pagina se si desidera. Generalmente si avrebbe un immagine, Pulsante, O il testo che un utente fa clic su per avviare la funzione javascript. Quando viene visualizzato il div Dalla funzione javascript è fondamentalmente di rimuovere la visualizzazione del valore di nessuno per la visualizzazione del valore di bianco o'', che restituisce gli elementi di valore di default che deve essere visualizzato. In secondo luogo, la div interiore html è riempito con predefiniti html codice che verrà utilizzato il codice che è ciò che si desidera venga visualizzato nella finestra di sovrapposizione. In questo caso avremo un video all'interno di una tabella che consente di centrare il video al centro dello schermo. Vi sarà anche un pulsante di chiusura per chiudere la finestra o semi-trasparente pop-up div. Cliccando sul pulsante di chiusura nella finestra pop-up Inizia l'inversione di quando è stato visualizzato. Si assegna il valore div display torna a nessuno e fissa interna html torna a nulla. Il codicePer iniziare è il codice qui dall'inizio alla fine e poi andare su di esso pezzo per pezzo:Rigorose modalitàQuesta linea di codice è necessario intervenire a più alto del documento per consentire in modo rigoroso IE7. Posizionamento fisso non è supportato in IE7 senza questo attuate e questo tutorial non funziona. Anche essere consapevoli che questo potrebbe non funzionare in tutti i browser come posizionamento fisso è una nuova proprietà css.Stile cssAndiamo oltre i css stile del div e vedere che cosa rende un semi-trasparente div overlay che il resto della pagina:Z-index css proprietà viene utilizzata per elevare il livello in z spazio al di sopra di tutti gli altri elementi come menu a discesa, Etc. Impostarla a 10000 abbastanza bene assicura che si sta per arrivare sopra la maggior parte degli altri elementi che hanno definito uno Z-index. La parte più difficile è ottenere la semi-trasparente div effetto su più browser. Firefox, Internet Explorer, Safari, Opera, E anche google = cromo o non tutti i browser utilizzano lo stesso semi-trasparente impostare proprietà css. Vale a dire lo utilizza le impostazioni del filtro. Mozilla Firefox è "-MOX-opacità". E altri usano "opacità" che rende più senso per me e spero diventerà lo standard per il futuro. La prima linea "# (displaybox"Assegna il seguente stile per l'elemento con l'id displaybox. I prossimi cinque linee sono diversi modi per effettuare l'opacità al 50% " Filtro: Alfa (opacità = 50); / * vale a dire anziani * / Filtro:Progid:Dximagetransform.microsoft.Alfa (opacità = 50); / * Ie * / -moz-opacità: .50; / * * anziani mozilla / -KHTML-opacità: 0.5; / * anziani safari * / Opacità: 0.5; / * supportato dalle attuali mozilla, Safari, E l'opera * / " Semplicemente cambiare il 5, .5 o 50 valori di ciò che ti piace. L'esempio è fissato al 50% di opacità. "Background-color:# 000000;"Naturalmente rende il colore di sfondo nero e poi il 50% di trasparenza renderà grigio. "Posizione:Fisso;"Definisce la posizione che deve essere fissata non in valore assoluto o relativo il flusso della pagina. Questo rende così l'elemento può saltare fuori e galleggiare sopra altri elementi ed è fissato alla finestra e non la pagina, o altri elementi. Relativo posizionamento mette l'elemento nel flusso della pagina e viene spostato e si muove intorno ad esso altri elementi. Assoluta galleggia sopra, ma è relativa alla pagina, non la finestra, Se è stato utilizzato questo il solo elemento di rimanere in cima alla pagina. "Superiore:0px; sinistra:0px; larghezza:100%; altezza:100%;"Luoghi semi trasparente div in alto a sinistra e si diffonde fuori, per quanto si può andare in tutta la finestra. "Text-align:Centro; vertical-align:Mezzo;"È il mio tentativo di inizio centro gli elementi all'interno del div al centro della pagina. JavascriptOra diamo un'occhiata al javascript che fa cambiare l'elemento quando l'utente interagisce con la pagina ed esegue la funzione javascript:La prima linea della funzione dichiara il nome della funzione "Clicker funzione () ("Per essere utilizzati in tutta la pagina. "Var = Thediv documento.GetElementById ( 'displaybox'); " Imposta il valore di "Thediv" variabile al div con id "displaybox". "Thediv" variabile sarà utilizzata per il resto della funzione in modo che il browser non è di ottenere il ri-displaybox elemento. "If (Thediv.Stile.Display == "none") ("Dice fondamentalmente, "se adesso Thediv non viene visualizzato fare quello che sto per dirvi." Thediv rendere visibile "Thediv.Stile.Display = "";". Goccia in questo html in Thediv "Thediv.Innerhtml = "a href='#' onclick='return clicker();' chiudere la finestra / a"". Ideale citare i due marchi qui si metterebbe qualunque html che si desidera venga visualizzato. Ricordo che, avendo un'altra citazione [ "] si concluderà questo tag in modo che si dovrebbe utilizzare virgolette nella vostra html [ '], O la fuga [ "] usando un backslash [] di fronte a tutte le quotazioni e.g. [ "]. Si dovrebbe in qualche parte ci sono la capacità di chiudere la finestra di nuovo. Altri saggi, l'utente si blocca con la finestra nella parte superiore della pagina e di non essere in grado di tornare. "Else ()"Se il div è visibile quindi... "Thediv.Stile.Display = "none";"Nascondere "Thediv.Innerhtml ='';"E impostate il suo contenuto per nulla. "}"Fine del resto se la dichiarazione. "Return false;"Return false per la funzione. Questo rende praticamente in modo che il link in realtà non andare verso la destinazione del href quando si fa clic su di esso. Se si utilizza un metodo onclick su un link. "}"Fine della funzione. Rendendo il lavoroPer renderla effettivamente il lavoro con la pagina è necessario avere il div da qualche parte nella pagina nascosta all 'inizio e qualcosa per l'utente di fare clic su:Div nascosti displaybox: Un link che verrà eseguito e riprendere il clicker funzione javascript onclick: Vista esempio Questo dovrebbe darvi qualche idea di come creare questo effetto e anche darti sufficiente comprensione per regolare, Cambiare, Manipolare e di andare nella vostra html layout. Gustare! | |||||||||||||
|
FORUM • TUTORIALS • MAGAZINE • SERVIZI • VIDEO • NEWS • BLOG © CreativeCOW.net Tutti i diritti sono riservati. Creative Comunità del Mondo [Superiore] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
