Pop-up-Fenster für eine Vielzahl von Zwecken werden in der Webkonstruktion vielseitig verwendet. Sie können verwendet werden, um verschiedene Arten von Menüs zu erstellen, Werbetexte und -grafiken zu platzieren, Tooltips beim Ausfüllen komplexer Formulare und es ist bequem, die Formulare selbst in Fenstern zu platzieren, die keinen Platz auf der Seite einnehmen. In unserem Artikel finden Sie eine Beschreibung, wie Sie ein solches Fenster herstellen können.
Es ist notwendig
Grundkenntnisse in HTML
Anleitung
Schritt 1
Popup, HTML, versteckte Ebene
Schritt 2
Auf vielen Seiten im Web sieht man, dass ausgefallene Bibliotheken verschiedener JavaScript-Frameworks (jQuery, MooTools, Prototype, etc.) verwendet werden, um Popup-Fenster in den Seiten zu erstellen. Tatsächlich sind sie jedoch nicht erforderlich, um dieses spezielle Problem zu lösen. Die in Hypertext Markup Language (HTML) und Cascading Style Sheets (CSS) verfügbaren Tools reichen aus, um Pop-ups zu erstellen. Die so erstellten Fenster funktionieren unabhängig davon, ob JavaScript im Browser des Besuchers aktiviert ist.
Der gesamte Code, der das Popup erstellt, kann in zwei Zeilen platziert werden. Die erste Zeile erstellt einen Link, der angeklickt werden muss, um das Popup anzuzeigen:
Klicke hier!
Hier legt das onmouseover-Attribut des Link-Tags den Standard-Mauscursortyp für Links fest. Das onclick-Attribut gibt an, dass beim Klicken auf den Link der ausgeblendete PopUp-Block sichtbar werden soll.
Die zweite Zeile ist tatsächlich das Popup-Fenster. Layer mit der PopUp-Kennung und der Größe des Fensters, Farbe und Größe von Text, Hintergrund und Rahmen, die im style-Attribut angegeben sind:
Dies ist der Text im Popup
Es ist standardmäßig nicht sichtbar - dies wird durch den Anzeigeselektor mit dem Wert none in der Ebenenstilbeschreibung angezeigt.
Eigentlich ist dies alles, was Sie brauchen, um ein Popup-Fenster zu erstellen - platzieren Sie diese beiden Zeilen zwischen den Tags und Ihrer Seite und es kann losgehen.
Schritt 3
Um das Popup-Fenster vor dem Tag schließen zu können, müssen Sie einen Link hinzufügen, der die entgegengesetzte Aktion ausführt - die sichtbare Ebene mit der PopUp-Kennung ausblenden:
schließen
Schritt 4
Und wenn Sie möchten, dass das Fenster nicht durch Klicken, sondern durch Bewegen des Mauszeigers geöffnet wird, muss die erste Zeile mit dem Link auf diese Weise geändert werden:
Bewegen Sie die Maus hierher!
Schritt 5
Das Prinzip und der Aufbau des Popup-Fenster-Codes sind Ihnen nun bekannt und die Gestaltung von Aussehen und Inhalt hängt ganz von Ihren Zielen und Ihrer Vorstellungskraft ab.
