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

Detailliertes Tutorial zur Installation von mysql8.0 mit dem Linux-Befehl yum

1. Reinigen Sie vor der Installation gründlich rp...

vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten

Vue $set Array-Sammlungsobjektzuweisung In der be...

Anwendungsverschachtelung von HTML-ul-ungeordneten Tabellen

Anwendungsschachtelung ungeordneter Listen Code ko...

Vier Modi zum Öffnen und Schließen von Oracle

>1 Starten Sie die Datenbank Geben Sie im cmd-...

So installieren Sie eine MySQL-Datenbank auf einem Debian 9-System

Vorwort Beim Anblick des Titels sollte sich jeder...

JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

In diesem Artikel wird der spezifische JavaScript...

Mysql-Datumsformatierung und komplexe Datumsbereichsabfrage

Inhaltsverzeichnis Vorwort Anwendungsszenarios fü...

MySQL 8.0.21 Installationstutorial mit Bildern und Text

1. Laden Sie den Download-Link herunter Klicken S...

Docker verwendet das Tool nsenter, um in den Container zu gelangen

Bei der Verwendung von Docker-Containern ist es b...

CSS erreicht hochadaptiven Vollbildmodus

Beim Schreiben meiner eigenen Demo möchte ich dis...

Lösen Sie das domänenübergreifende Problem von Get- und Post-Anfragen von vue $http

Vue $http - domänenübergreifendes Abrufen und Sen...

Verschiedene Methoden zum Neustarten von Mysql unter CentOS (empfohlen)

1. MySQL über RPM-Paket installiert Dienst MySQL ...

JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

In diesem Artikelbeispiel wird der spezifische JS...

Vue-CLI - Aufzeichnung der Schritte zur mehrseitigen Verzeichnisverpackung

Seitenverzeichnisstruktur Beachten Sie, dass Sie ...

Implementierung der Formularübermittlung in HTML

Formularübermittlungscode 1. Quellcode-Analyse &l...