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

Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

1. Die Entstehung des Problems Habe eine flache L...

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

Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

JS beherrscht schnell die Verwendung von ES6-Klassen

Implementierung von TypeScript im React-Projekt

Routing-Wiederverwendungsfunktion für mehrere Tabs der Ant Design Blazor-Komponentenbibliothek

Zwei Verwendungen von iFrame-Tags in HTML

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

So verstehen Sie die Dateninteraktion und -anzeige im Vue-Frontend und -Backend

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Lösung für das Problem, dass die virtuelle Maschine Ubuntu 16.04 keine Verbindung zum Internet herstellen kann

Detaillierte Erläuterung des Implementierungsprozesses der Dual-Master-Synchronisierung von Teiltabellen in MySQL 5.7

Artikel empfehlen

Nginx-Reverseproxy und Lastausgleichspraxis

Der DOCTYPE-Modusauswahlmechanismus bekannter Browser

Eine kurze Diskussion über die Leistungsprobleme des MySQL-Paging-Limits

So ändern Sie den Standardzeichensatz von MySQL auf dem MAC auf UTF-8

Das KTL-Tool realisiert die Methode zum Synchronisieren von Daten von MySQL zu MySQL

Web 2.0: Ursachen und Lösungen der Informationsüberflutung

Lösen Sie das Problem ungültiger UTF8-Einstellungen in MySQL 5.6

Detaillierte Erklärung zur Verwendung von CSS3 RGB und RGBA (transparente Farbe)

Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

Verschiedene Möglichkeiten, den Aushöhlungseffekt der CSS3-Maskenebene zu erzielen

Warum ist es langsam, wenn Limit- und Offset-Paging-Szenarien verwendet werden?

So optimieren Sie MySQL-Indizes

Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden

CSS3 Milchglaseffekt

Vergleich der Effizienz zwischen Einzeltabellenabfrage und Mehrtabellen-Joinabfrage in der MySql-Datenbank