Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html"; charset="utf-8" />
<title>LIGHTBOX-BEISPIEL</title>
<Stil>
* {
Rand: 0;
Polsterung: 0
}
html, Text {
Höhe: 100%;
Breite: 100 %;
Schriftgröße: 12px
}
.weißer_Inhalt {
Anzeige: keine;
Position: absolut;
oben: 25 %;
links: 25 %;
Breite: 50%;
Polsterung: 6px 16px;
Rand: 12px durchgezogen #D6E9F1;
Hintergrundfarbe: weiß;
z-Index: 1002;
Überlauf: automatisch;
}
.schwarzes_Overlay {
Anzeige: keine;
Position: absolut;
oben: 0%;
links: 0%;
Breite: 100 %;
Höhe: 100%;
Hintergrundfarbe: #f5f5f5;
z-Index: 1001;
-moz-Deckkraft: 0,8;
Deckkraft: 0,80;
Filter: Alpha (Deckkraft = 80);
}
.schließen {
schweben: rechts;
klar: beides;
Breite: 100 %;
Textausrichtung: rechts;
Rand: 0 0 6px 0
}
.schließe ein {
Farbe: Nr. 333;
Textdekoration: keine;
Schriftgröße: 14px;
Schriftstärke: 700
}
.con {
Texteinzug: 1,5 Stck.;
Zeilenhöhe: 21px
}
</Stil>
<Skript>
Funktion show(tag){
var light = document.getElementById(tag);
var fade = document.getElementById('fade');
Licht.Stil.Anzeige='Block';
fade.style.display='blockieren';
}
Funktion ausblenden(Tag){
var light = document.getElementById(tag);
var fade = document.getElementById('fade');
Licht.Stil.Anzeige='keine';
fade.style.display='keine';
}
</Skript>
</Kopf>
<Text>
<a href="javascript:void(0)" onclick="show('light')">Öffnen 1</a>
<a href="javascript:void(0)" onclick="show('light2')">Öffnen 2</a>
<div id="hell" class="weißer_Inhalt">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> Schließen</a></div>
<div Klasse="con">
Inhalt 1 Inhalt Inhalt ...
</div>
</div>
<div id="Licht2" Klasse="weißer_Inhalt">
<div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> Schließen</a></div>
<div Klasse="con">
Inhalt 2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

Der Code ist oben, Sie können ihn kopieren und ausprobieren ... Die Größe der Popup-Ebene kann eingestellt werden und kann auch proportional sein

<<: SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)

>>: Detaillierte Erklärung von :key in VUE v-for

So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen

In diesem Artikel erfahren Sie, wie Sie mithilfe der Ereignisdelegierung die Message Board-Funktion in JavaScript implementieren

Artikel

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.

So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen

Probleme und Lösungen beim Verbinden des Knotens mit der MySQL-Datenbank

Beim Ändern eines Datensatzes in MySQL lautet die Aktualisierungsoperation Feld = Feld + Zeichenfolge

Zwei Methoden zum Wiederherstellen von MySQL-Daten

In diesem Artikel erfahren Sie, wie Sie mithilfe der Ereignisdelegierung die Message Board-Funktion in JavaScript implementieren

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Führen Sie die Schritte zum Konfigurieren der grundlegenden Benutzerauthentifizierung auf Nginx-Ebene aus.

Detaillierte Erklärung der Definition und Funktion von Trennzeichen in MySQL

Detaillierte Erläuterung der geplanten Aufgaben für normale Benutzer unter Linux

Analyse von Context-Anwendungsszenarien in React

Artikel empfehlen

Zusammenfassung der Wissenspunkte zum MySQL ALTER-Befehl

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

3 Funktionen der toString-Methode in js

Ausführliche Erklärung des Sperrmechanismus in MySQL

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Eine kurze Diskussion über den Unterschied zwischen src und href in HTML

Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript

SQL-Interviewfrage: Ermitteln Sie die Summe der Zeitunterschiede (ignorieren Sie Duplikate)

So verarbeiten Sie lokal dynamisch geladene Bilder in Vue

Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation

Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs

Der Unterschied zwischen Div und Tabelle in Geschwindigkeit, Laden, Webanwendung usw.

Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen

Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL

Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud