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

js zum Aufrufen der Netzwerkkamera und Behandeln häufiger Fehler

Vor kurzem musste ich aus geschäftlichen Gründen ...

Zusammenfassung der Probleme, die bei der Verwendung von JDBC zur Verbindung mit einer MySQL-Datenbank auftreten können

Klären Sie zunächst einige Konzepte: JDBC: Java-D...

Problem mit der Iframe-QRC-Zuweisung (serverseitig)

Ich bin heute auf dieses Problem gestoßen. Ich hab...

Drei Schritte zur Lösung des IE-Adressleistensymbol-Anzeigeproblems

<br />Dieses Tutorial zur Erstellung von Web...

Nodejs erstellt ein Tool zur Dokumentsynchronisierung zur automatischen Synchronisierung mit dem Gitee-Implementierungscode

Ursprüngliche Absicht Der Grund für die Entwicklu...

Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

Zweck: 1. Um das externe Netzwerk des Servers übe...

Praktisches Beispiel einer virtuellen Vue-Liste

Inhaltsverzeichnis Vorwort Design erreichen Zusam...

Eine kurze Analyse der MySQL PHP-Syntax

Schauen wir uns zunächst die grundlegende Syntax ...

Lösen Sie das Problem verstümmelter chinesischer Schriftzeichen in Mysql5.7

Wenn Sie MySQL 5.7 verwenden, werden Sie feststel...

Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4

Die verwendete virtuelle Maschine ist CentOS 8.4,...

So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten

Inhaltsverzeichnis Projekthintergrund Start Erste...

So verwenden Sie das JavaScript-Strategiemuster zum Validieren von Formularen

Inhaltsverzeichnis Überblick Formularvalidierung ...

Grundlegende Anweisungen der MySQL-Datendefinitionssprache DDL

MySQL DDL-Anweisungen Was ist DDL, DML. DDL ist e...

React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).

Ich habe gerade angefangen, React für Projekte zu...

Lösen Sie das Problem, dass Docker das MySQL-Image zu langsam zieht

Nachdem wir eine halbe Stunde lang versucht hatte...