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

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

Artikel empfehlen

So überprüfen Sie die PCIe-Version und -Geschwindigkeit unter Linux

PCIE verfügt über vier verschiedene Spezifikation...

Eine kurze Analyse des Kimono-Memo-Problems

Heute musste ich nach dem Neustart des Spiels fes...

Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images

Hintergrund Verwenden Sie Idea mit Docker, um den...

Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik

Vorwort Linux verfügt über entsprechende Open-Sou...

Ausnahmefehler beim Packen von Webpack-Dateien

Vor dem Verpacken im Webpack müssen wir sicherste...

Eine schnelle Lösung für den Fehler #1929 Falscher Datums-/Uhrzeitwert: '''' für die Spalte ''createtime'' bei Verwendung von MySQL 5.x oder höher

Nachdem ich MySQL installiert hatte, erhielt ich ...

Implementierung von Linux-Dateisystemvorgängen

In dieser Lesenotiz werden hauptsächlich die Vorg...

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

Inhaltsverzeichnis 1. DHCP-Dienst (Dynamic Host C...

Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels

Tabellenfelder hinzufügen alter table table1 add ...

Mybatis Paging-Plugin pageHelper - ausführliche Erklärung und einfaches Beispiel

Mybatis Paging-Plugin pageHelper - ausführliche E...

Lösung zum Vergessen des Root-Passworts für selbst erstelltes MySQL in Alibaba Cloud Linux CentOS 7.2

Verifizierungsumgebung: [root@~~/]# rpm -qa | gre...

So passen Sie geplante AT- und Cron-Aufgaben in Linux an

Es gibt zwei Arten von geplanten Tasks im Linux-S...

js zum Implementieren von Details im Datei-Upload-Stil

Inhaltsverzeichnis 1. Übersicht 2. Parameter zum ...

Markup-Validierung für Doctype

Aber vor kurzem habe ich festgestellt, dass die Ve...

Ein praktischer Leitfaden zu den Komponenten zur Leistungsoptimierung beim ersten Bildschirm von Vue-Projekten

Inhaltsverzeichnis Komponente zur Leistungsoptimi...