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

Eine vollständige Anleitung zum Abfragen und Löschen doppelter Datensätze in MySQL

Vorwort In diesem Artikel werden hauptsächlich di...

So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver

So hosten Sie zwei oder mehr Sites auf dem belieb...

Pessimistisches Sperren und optimistisches Sperren in MySQL

In relationalen Datenbanken sind pessimistisches ...

Ein Leistungsfehler bei MySQL-Partitionstabellen

Inhaltsverzeichnis 2. Stapelanalyse mit pt-pmap 3...

CSS zum Erzielen eines Popup-Fensters oben und unten, links und rechts in der Mitte und eines transparenten Hintergrund-Sperrfenstereffekts

Es gibt eine einfache CSS-Methode, um das Popup-F...

Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben

1. Voraussetzungen: Die Datenbanksicherung ist be...

CSS horizontale Zentrierung und Begrenzung der maximalen Breite

Eine CSS-Layout- und Stilfrage: Wie kann man die ...

So migrieren Sie lokales MySQL in eine Serverdatenbank

Wir können den scp-Befehl von Linux (scp kann unt...

Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)

Haben Sie schon einmal eine Situation erlebt, in d...

RHEL7.5 MySQL 8.0.11 Installations-Tutorial

Dieser Artikel zeichnet das Installationstutorial...

Grundlegendes Tutorial zur Bedienung von Dateien und Berechtigungen in CentOS

Vorwort Bevor wir beginnen, sollten wir uns kurz ...

Beispiele für die Interaktion zwischen MySQL und Python

Inhaltsverzeichnis 1. Daten vorbereiten Erstellen...

Detaillierte grafische Erklärung zur Verwendung von SVG im Vue3+Vite-Projekt

Heute habe ich bei der Verwendung von SVG in der ...

So analysieren Sie die Leistung von MySQL-Abfragen

Inhaltsverzeichnis Grundlagen langsamer Abfragen:...

Webdesign-Erfahrung: Selbstgerechte Webdesigner

1. Trash oder Klassiker? Die Webtechnologie aktua...