Heim >Web-Frontend >HTML-Tutorial >Es ist sehr einfach, HTML-Popup-Div zu verwenden, um eine mobile Zentrierung_HTML/Xhtml_Webseitenproduktion zu erreichen

Es ist sehr einfach, HTML-Popup-Div zu verwenden, um eine mobile Zentrierung_HTML/Xhtml_Webseitenproduktion zu erreichen

WBOYOriginal: 2016-05-16 16:38:521330Durchsuche

Code kopieren

Der Code lautet wie folgt:

Unbenanntes Dokument <style type="text/css"> /*STYLE der Popup-Ebene*/ html,body {height:100%; font-size:12px;} .mydiv { Hintergrundfarbe: #ff6; Rahmen: 1px fest #f90; Linienhöhe: 40px; Schriftstärke: fett; Breite: 300px; 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 Der Wert beträgt die Hälfte seiner Höhe*/ margin-top:0px position:fixed!important;/*FF IE7*/ position:absolute;/*IE6*/ _top : expression(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*/ } background-color: #ccc; >width: 100%; height: 100%; top:0;/*FF IE7*/ filter:alpha(opacity=50);/*IE* / opacity:0.5;/*FF*/ z-index:1; position:fixed!important;/*FF IE7* / position:absolute;/*IE6*/ _top: expression(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*/ } /*The END*/ </ style> <script type="text/javascript">function showDiv(){ document.getElementById('popDiv') .style.display='block'; getElementById('bg').style.display='block'; function closeDiv(){ document.getElementById('popDiv ').style.display='none'; document.getElementById('bg').style.display='none'; </script> id="popDiv" class="mydiv" style="display:none;">title Sie wissen schon <a href="javascript:closeDiv()"> Fenster schließen</a></div> <div id="bg" class="bg" style="display:none ;"></div> > <div style="padding-top: 20px;"><input type="Submit" name="" value="Ebene anzeigen" onclick="javascript:showDiv()" /> ></div> </body> Einen schönen Stil anhängen Code kopieren Der Code lautet wie folgt: <div class="msgborder" id="phpcode3"> <html> <head><title>

< td style="width:1px;">

窗口标题

消息正文

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Stellen Sie die Breite in der Tabelle so ein, dass sie sich nicht mit dem Text ändert, sodass es sich um eine feste_HTML/Xhtml_Webseitenproduktion handeltNächster Artikel：Stellen Sie die Breite in der Tabelle so ein, dass sie sich nicht mit dem Text ändert, sodass es sich um eine feste_HTML/Xhtml_Webseitenproduktion handelt

In Verbindung stehende Artikel

Mehr sehen