Wie man ein Popup-Fenster ohne JavaScript

June 2

Popupfenster sind ein nützliches, aber manchmal frustrierend Teil des Internets. Wenn verwendet, um Informationen zu vermitteln, sind sie ein wertvolles Instrument. Wenn verwendet, verkaufen Sie Urlaub Pakete, sie sind ärgerlich. Wenn Sie als Webdesigner arbeiten, müssen Sie auch betrachten, wie Sie ein Popup-Fenster erstellen. In der Regel Sie JavaScript verwenden, um das Pop-up-code aber einige Browser blockiert JavaScript, und es funktioniert nicht immer richtig. Sie können erstellen Popup-Text in Ihre Cascading Style Sheets (CSS) auf der Seite angezeigt, wenn Sie die Maus über einen Block von Hypertext.

Anweisungen

1 Öffnen Sie die Webseite in einem HTML-Bearbeitungstool wie z. B. Editor.

2 Positionieren Sie den Cursor innerhalb des Hyperlinks möchten Sie Pop-up.

3 Geben Sie "< span >" am Anfang des Textes innerhalb der Hyperlink.

4 Geben Sie < / span > am Ende des Textes innerhalb der Hyperlink.

5 Speichern Sie die Datei und schließen Sie es.

6 Öffnen Sie Ihre CSS-Datei in einem Texteditor.

7 Fügen Sie den folgenden Text:

"Div #links a Span {anzeigen: none;}"

Dies wird verhindert, dass den versteckten Popup-Text erscheint beim Öffnen der Seite.

8 Fügen Sie den folgenden Text:

"Div #links a: Hover Span {anzeigen: blockieren;

Position: absolute; oben: 200px; Links: 0; Breite: 125px;

Polsterung: Xpx; Marge: Ypx; Z-Index: Z;

Farbe: #(Farbcode); Hintergrund: schwarz;

Schriftart: 10px (Schriftart), (Stil); Textausrichtung: (Ausrichtung);} "

Die letzten drei Zeilen darstellen, wie der Text angezeigt wird. "X" ersetzen "Y" und "Z" mit entsprechenden Werten. Ersetzen "(Farbcode)", "(Schriftart)", "(Stil)" und "(Ausrichtung)" mit Werten für Ihre Webseite.

9 Speichern Sie und schließen Sie die CSS-Datei.

Tipps & Warnungen

  • Diese Methode gilt nur für Text-Popups. Verwenden Sie keine Symbole oder andere Grafiken.