            |
| FOREN | TUTORIALS | MAGAZIN | SERVICES | VIDEOS | NEWS | BLOGS |
| ||
Ganze Seite Overlay-FensterAbraham Chaffin
Ganze Seite Pop-up-Fenster-Overlay In diesem Tutorial lernen Sie, wie Sie eine ganze Seite Pop-up-Fenster, dass eine bestehende Overlays html Seite. Diese Technik wird oft für die Anzeige ein Video, Movie-Datei, Bild, Oder Form, wenn ein Benutzer klickt auf ein Element in einer Web-Seite.
Ansicht Beispiel EinführungDiese Technik ist nicht ein Pop-up-Fenster, wie man im Allgemeinen denken,. Es sich nicht um ein separates Fenster der html Browser geöffnet ist, sondern eher ein div-Overlays, dass die bestehenden html Seite. Der div ist halb-transparent und erzeugt einen schönen Effekt, mit dem der Benutzer wissen, dass sie wieder auf die andere Seite durch Schließen der Fenster (div), die auf.Hinter der Methode hierfür ist recht einfach: Den ursprünglichen Zustand des DIV, die Überlagerung der Seite Verborgen ist ohne Inhalt in seiner inneren html. Das heißt, zunächst gibt es nichts zwischen dem öffnenden div-Tag und dem schließenden div-Tag und das Element hat eine Anzeige von keiner. , um die Anzeige der div Müssen Sie zuerst wählen und Element, dass ein Benutzer klicken Sie auf, Cursor auf, Etc. , um das Verhalten zu. Sie könnte sogar zu der Einleitung, wenn die Seite geladen wird, wenn Sie. Sie haben im Allgemeinen ein Bild, -Taste, Oder Text, den ein Nutzer auf, um die JavaScript-Funktion. Wenn das div wird angezeigt Durch die JavaScript-Funktion ist im Wesentlichen das Entfernen der Anzeige von keiner auf die Anzeige der Wert leer oder''die Renditen auf die Elemente, die Default-Wert angezeigt werden soll. Zweitens die div der inneren html wird mit vordefinierten html Code, wird der Code, das, was Sie wollen in der Overlay-Fenster. In diesem Beispiel werden wir ein Video in einer Tabelle, die hilft, die Video-Center in der Mitte des Bildschirms. Es wird auch eine Schaltfläche Schließen um das Fenster zu schließen oder semi-transparent Pop-up-div. Klick auf den Schließen-Button in der Pop-up-Fenster Initiiert der Auflösung von, wenn es angezeigt wurde. Es weist den DIV-Wert-Anzeige zurück und vor allem wird die innere html Zurück zu nichts. Den CodeUm hier ist der Code von Anfang bis Ende und dann werden wir über sie Stück für Stück:Strengen ModusDieser Code-Zeile ist erforderlich, an der Spitze des Dokuments zu ermöglichen strengen Modus in IE7. Feste Positionierung wird nicht unterstützt, ohne dass dies im IE7 implementiert und dieses Tutorial wird nicht funktionieren. Beachten Sie auch, dass diese möglicherweise nicht in allen Browsern als feste Positionierung ist eine neuere CSS-Eigenschaft.CSS-StylingUnd los geht's über die CSS-Styling der div und sehen, was macht es zu einem semi-transparenten div Overlays, dass der Rest der Seite:Der Z-index css Eigenschaft wird verwendet, um erhöhen die Ebene in z Raum über alle anderen Elemente wie Drop-Down-Menüs, Etc. Sie ihn auf 10000 recht gut gewährleistet, dass Sie gehen, um über die meisten anderen Elemente, die einen definierten Z-index. Der schwierigste Teil wird die semi-transparente div Wirkung über mehrere Browser. Firefox, Internet Explorer, Safari, Oper, Und auch Google-Chrom = o nicht alle diese Browser benutzen die gleiche halb-transparent css Eigenschaft. Verwendet, dh es ist-Filter-Einstellungen. Mozilla Firefox hat "-MOX-Deckkraft". Und andere Verwendung "Deckkraft", die den meisten Sinn für mich und hoffentlich wird der Standard in der Zukunft. Der ersten Zeile "# displaybox ("Ordnet die folgenden Stil auf das Element mit der ID displaybox. Die nächsten fünf Linien sind verschiedene Möglichkeiten, um die Deckkraft auf 50% " Filter: Alpha (Deckkraft = 50); / * älteren IE * / Filter:ProgID:Dximagetransform.microsoft.Alpha (Deckkraft = 50); / * IE * / -moz-Deckkraft: .50; / * älteren mozilla * / -KHTML-Deckkraft: 0.5; / * älteren Safari * / Deckkraft: 0.5; / * von aktuellen mozilla, Safari, Und Oper * / " ändern Sie einfach die 5, .5 oder 50-Werte, was Sie wie. Das Beispiel ist auf 50% Deckkraft. "Background-color:# 000000;"Natürlich ist die Hintergrundfarbe schwarz und dann die 50% der Transparenz wird es grau. "Position:Festnetz;"Setzt die Positionierung festgesetzt werden nicht absolut oder relativ in die Strömung der Seite. Dies macht es so das Element kann springen und schweben über andere Elemente und sich an das Fenster und nicht die Seite oder anderen Elementen. Relativen Positionierung wird das Element in der Strömung von der Seite und bewegt und bewegt sich um sie andere Elemente. Absolute schwimmt oben, aber ist relativ zu der Seite, nicht das Fenster, Wenn Sie dieses Element nur der Aufenthalt an der Spitze der Seite. "Spitze:0px; links:0px; Breite:100%; Höhe:100%;"Orte der halb transparenten div in der oberen linken Ecke und es breitet sich aus, wie weit wie möglich in das Fenster. "Text-align:Center; vertical-align:Mitte;"Beginn ist mein Versuch, Mitte der Elemente innerhalb der div in der Mitte der Seite. JavascriptNun werfen Sie einen Blick auf die JavaScript-macht, dass das Element ändern, wenn der Benutzer interagiert mit der Seite und führt die JavaScript-Funktion:Die erste Zeile der Funktion erklärt den Namen der Funktion "Clicker-Funktion () ("Werden auf der Seite. "Var Thediv = document.GetElementById ( 'displaybox'); " Setzt den Wert von "Thediv"-Variable in die div mit der ID von "displaybox". "Thediv" Variable wird durch den Rest der Funktion, so dass die Browser nicht haben, wieder die displaybox Element. "If (Thediv.Stil.Anzeige == "none") (", Sagt im Grunde, "Wenn jetzt Thediv wird nicht angezeigt, was ich zu sagen,." Thediv sichtbar machen "Thediv.Stil.Display = "";". Rückgang in diesem html in Thediv "Thediv.InnerHTML = "a href='#' onclick='return clicker();' Fenster schließen / a"". Zwischen den zwei Anführungszeichen hier würde, was html Sie werden angezeigt. Nicht vergessen, dass mit einem anderen Zitat [ "] wird Ende diesen Tag, so sollten Sie einfache Anführungszeichen in Ihrer html [ '] Oder aus der [ "] durch die Verwendung eines Backslash [] vor der genannten Zitate E.g. [ "]. Sie sollten irgendwo dort in der Lage sein, schließen Sie das Fenster wieder. Ansonsten wird der Benutzer stecken mit dem Fenster oben auf der Seite und nicht in der Lage sein, um zurück zu gelangen. ") else ("Wenn die div wurde dann sichtbar... "Thediv.Stil.Display = "none";"Verbergen "Thediv.InnerHTML ='';", Und stellen Sie es sich dabei um nichts. "}"Ende des else-Anweisung, wenn. "Return false;"Return false für die Funktion. Diesem Grunde ist es so, dass der Link nicht wirklich hier, um zur Bestimmung der href, wenn Sie auf sie. Wenn Sie einen onclick Methode auf einen Link. "}"Ende der Funktion. Es Arbeit, um sie tatsächlich in die Seite, die Sie brauchen, um die div irgendwo in der Seite versteckt am Anfang und etwas für die Benutzer, klicken Sie auf:Die versteckten displaybox div: Eine Verbindung, die Ausführung und die Rückkehr clicker JavaScript-Funktion onclick: Ansicht Beispiel Dies sollte Ihnen eine Vorstellung davon, wie man diesen Effekt und geben Sie genug verstehen, um, ändern, Und zu manipulieren, dass sie in Ihren eigenen html Layout. Genießen! | |||||||||||||
|
FOREN • TUTORIALS • MAGAZIN • SERVICES • VIDEOS • NEWS • BLOGS © CreativeCOW.net Alle Rechte vorbehalten. Creative Gemeinschaften der Welt [nach oben] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
