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

So verwenden Sie Lottie-Animationen in React Native-Projekten

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

So verwenden Sie Lottie-Animationen in React Native-Projekten

Vue implementiert eine Formularvalidierungsfunktion

Grundlegende Implementierungsmethode für die komponentenübergreifende Bindung mithilfe des V-Modells in Vue

Weitere Features der JavaScript-Konsole

Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen

So führen Sie .sh-Dateien im Linux-System aus

Der erste Schritt beim Einstieg in die MySQL-Datenbank besteht darin, eine Tabelle zu erstellen

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

Analyse zweier Verwendungen des A-Tags in HTML-Post-Anfragen

CSS Zurück zum Anfang Codebeispiel

Artikel empfehlen

So erstellen Sie eine automatisierte Bereitstellungsumgebung für Docker, Jenkins und Node.js von Grund auf

So mounten Sie die CD, um das RPM-Paket unter Linux zu finden

Detaillierte Erklärung zur Installation des Systems auf VMware Workstation 14 Pro (virtuelle Maschine)

Detailliertes Tutorial zur Docker-Compose-Bereitstellung und Konfiguration von Jenkins

Lösung für 700 % CPU-Auslastung eines Linux-Prozesses, der nicht beendet werden kann

Problemanalyse der Verwendung einer Idee zum Erstellen eines Springboot-Initialisiererservers

So lösen Sie das Problem des verstümmelten MySQL-Inserts

So legen Sie einen Alias für einen benutzerdefinierten Pfad in Vue fest

Detaillierte Erklärung zum Importieren/Exportieren von MySQL-Daten im Docker-Container

VM VirtualBox virtuelle Maschine mounten freigegebenen Ordner

Lösen Sie das Problem der Docker-Protokollmontage

Installieren Sie MySQL 5.6 aus der Yum-Quelle im Centos7.4-System

js-Methode zum Löschen eines Felds in einem Objekt

Detaillierte Anweisungen zur Installation der MySQL5.7-Datenbank unter Centos7.2

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns