HTML-Popup-Div ist sehr nützlich, um eine mobile Zentrierung zu realisieren

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>Unbenanntes Dokument</title>
<style type="text/css">
/*STIL der Popup-Ebene*/
html, Text {Höhe: 100 %; Rand: 0px; Schriftgröße: 12px;}
.meindiv {
Hintergrundfarbe: #ff6;
Rand: 1px durchgezogen #f90;
Textausrichtung: zentriert;
Zeilenhöhe: 40px;
Schriftgröße: 12px;
Schriftstärke: fett;
z-Index:99;
Breite: 300px;
Höhe: 120px;
links: 50 %;/*FF IE7*/
oben: 50 %;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 dieser Wert ist die Hälfte seiner Breite*/
margin-top:-60px!important;/*FF IE7 dieser Wert ist die Hälfte seiner eigenen Höhe*/
Rand oben: 0px;
Position: behoben! wichtig;/*FF IE7*/
position:absolut;/*IE6*/
_top: Ausdruck(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
Hintergrundfarbe: #ccc;
Breite: 100 %;
Höhe: 100%;
links: 0;
oben:0;/*FF IE7*/
Filter: Alpha (Deckkraft = 50);/*IE*/
Deckkraft: 0,5;/*FF*/
z-Index: 1;
Position: behoben! wichtig;/*FF IE7*/
position:absolut;/*IE6*/
_top: Ausdruck(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*Das ENDE*/
</Stil>
<Skripttyp="text/javascript">
Funktion showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}
Funktion closeDiv(){
document.getElementById('popDiv').style.display='keine';
document.getElementById('bg').style.display='keine';
}
</Skript>
</Kopf>
<Text>
<div id="popDiv" class="mydiv" style="display:none;">Titel<br/>Du weißt schon<br/>
<a href="javascript:closeDiv()">Fenster schließen</a></div>
<div id="bg" class="bg" style="display:none;"></div>

<div Stil="padding-top: 20px;">
<input type="Senden" name="" value="Ebene anzeigen" onclick="javascript:showDiv()" />
</div>
</body>
</html>

Fügen Sie einen schönen Stil hinzu

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf><Titel></Titel>
<Stil>
.mesWindowTop {
Schriftgröße: 12px;
Schriftstärke: fett;
Textausrichtung: links;
}
.mesWindowContent {
Schriftgröße: 12px;
}
.mesWindow {
Hintergrund: keine Wiederholung, Scrollen 0 0 #FFFFFF;
Rand: 1px durchgezogen #666666;
}
</Stil>
</Kopf>
<Text>
<div id="mesWindow" class="mesWindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><div class="mesWindowTop"><table width="100%" height="100%"><tbody><tr><td>Fenstertitel</td><td style="width:1px;"><input type="button" value="Schließen" class="close" title="Fenster schließen" onclick="closeWindow();"></td></tr></tbody></table></div><div id="mesWindowContent" class="mesWindowContent"><div style="padding:20px 0 20px 0;text-align:center">Nachrichtentext</div></div><div class="mesWindowBottom"></div></div>
</body>
</html>

<<: 25 Tipps und Tricks zur Div+CSS-Programmierung

>>: MySQL-Datenbankgrundlagen - Prinzip der Join-Operation

Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten

Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife

Inhaltsverzeichnis Problembeschreibung Methode 1 ...

HTML-Popup-Div ist sehr nützlich, um eine mobile Zentrierung zu realisieren

Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten

Verwenden Sie Nicht-Root-Benutzer, um Skriptvorgänge in Docker-Containern auszuführen

Callback-Funktionen in JavaScript verstehen und verwenden

Zusammenfassung häufig verwendeter CSS-Kapselungsmethoden

Verständnis des synchronen oder asynchronen Problems von setState in React

8 Beispiele für die Verwendung des Killall-Befehls zum Beenden von Prozessen in Linux

Zusammenfassung der bei der Arbeit häufig verwendeten Linux-Befehle

Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren

So installieren Sie Solr 8.6.2 in Docker und konfigurieren den chinesischen Wortsegmentierer

CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen

Artikel empfehlen

Was ist ZFS? Gründe für die Verwendung von ZFS und seine Funktionen

jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

So verwenden Sie Verbindungen der Physik-Engine in CocosCreator

CSS zum Erzielen des Bildschwebens mit der Maus-Falteffekts

Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife

Mysql-Operation zum Abrufen von Tabellenkommentarfeldern

CentOS verwendet lokale Yum-Quellen zum Erstellen einer LAMP-Umgebung – Grafik-Tutorial

Vor- und Nachteile von MySQL-Indizes und Richtlinien zum Erstellen von Indizes

Detaillierte Erklärung der Zählung ohne Filterbedingungen in MySQL

Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid

Details zum Lazy Loading im Vue-Routing

MySQL 8.0.12 Installations- und Nutzungs-Tutorial

Analyse des Implementierungsprozesses der drei Modi des VMWare-Netzwerkadapters

Vue+video.js implementiert Video-Wiedergabelisten