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

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

Artikel empfehlen

Beispiel und Update für die Erstellung von HTML5+CSS3-Headern

Beim letzten Mal haben wir uns zwei Header-Layout...

Löschen von zwei Bildern mit derselben ID im Docker

Als ich heute einen Docker-Container erstellt hab...

Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren

Mit dem Nginx-Modul ngx_http_image_filter_module ...

Tutorial zur Verwendung von Portainer zum Herstellen einer Verbindung mit einem Remote-Docker

Portainer ist eine leichtgewichtige Benutzeroberf...

Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x

1. Installation Installation mit yum ##Yum nginx ...

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

VMware-Workstations starten den virtuellen Maschi...

Detaillierte Schritte zur Installation von MySQL in Win

In diesem Artikel werden die detaillierten Schrit...

Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist

Holen Sie sich das IP-Tool importiere lombok.exte...

Beispielerklärung der Alarmfunktion in Linux

Einführung in die Linux-Alarmfunktion Oben genann...

Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele

Der Interviewer wird Sie manchmal fragen: „Sagen ...

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

In MySQL können Sie die Funktionen IF(), IFNULL()...

Detaillierte Erklärung der drei wichtigsten Frontend-Technologien React, Angular und Vue

Inhaltsverzeichnis 1. Reagieren Grundlegende Verw...

Lösung für den Fehler beim Laden der dynamischen Bibliothek, wenn ein Linux-Programm ausgeführt wird

Dynamische Bibliothek kann unter Linux nicht gela...

Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?

Hintergrund In diesem Artikel wird hauptsächlich ...

So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306

Port 80 ist ebenfalls konfiguriert. Geben Sie zun...