JS-Popup-Ebene in der Mitte des Bildschirms positioniert example

Heim

Web-Frontend

js-Tutorial

JS-Popup-Ebene in der Mitte des Bildschirms positioniert example_javascript skills

May 16, 2016 pm 04:47 PM

定位弹出层

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 .org/ 1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
< title>Keine Titeldokument</title> 
<style type="text/css"> ;font -size:12px;} 

.mydiv { 
background-color: #ff6; 
border: 1px solid #f90; 
line -height: 40px; 
font-weight: fett; 
width: 120px;
left :50 %;/*FF IE7*/ 
top: 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 ist 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 */ 

} 

.bg { 
Hintergrundfarbe: #ccc; 
Höhe: 100%; :0 ; 
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' 
document.getElementById('bg') .style .display='block'; 
} 

function closeDiv(){ 
document.getElementById('popDiv').style.display='none' 
document.getElementById ('bg').style.display='none' 

</head> 
<div id="popDiv" class="mydiv" style="display:none;">Herzlichen Glückwunsch! <br/>Ihre Punktzahl beträgt: 60 Punkte 
<a href="javascript:closeDiv()">Fenster schließen</a></div> div id="bg" class="bg" style="display:none;"></div> <input type="Submit" name="" value="Layer anzeigen" onclick="javascript:showDiv()" /> ;/html> 

Erklärung dieser Website

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

Heißer Artikel

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

Repo: Wie man Teamkollegen wiederbelebt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

3 Wochen vor By 王林

Hot-Tools-Tags

Code und IT

Stimme

Geschäft

Marketing

AI Detektor

Chatbot

Design & Kunst

Heißer Artikel

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

Repo: Wie man Teamkollegen wiederbelebt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

3 Wochen vor By 王林

Heiße Artikel -Tags

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7279

Java-Tutorial

1622

CakePHP-Tutorial

1340

Laravel-Tutorial

1257

PHP-Tutorial

1205

Related knowledge

So finden Sie kabellose Apple-Kopfhörer, wenn sie verloren gehen_So finden Sie kabellose Apple-Kopfhörer Mar 23, 2024 am 08:21 AM

So finden Sie kabellose Apple-Kopfhörer, wenn sie verloren gehen_So finden Sie kabellose Apple-Kopfhörer

So verwenden Sie das WordPress-Plugin, um eine sofortige Positionierungsfunktion zu erreichen Sep 05, 2023 pm 04:51 PM

So verwenden Sie das WordPress-Plugin, um eine sofortige Positionierungsfunktion zu erreichen

So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap - So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap Apr 01, 2024 pm 02:11 PM

So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap - So ermitteln Sie den Standort des Mobiltelefons der anderen Partei auf Amap

Wie finde ich schnell den Standort eines Huawei-Telefons, nachdem es verloren gegangen ist? Mar 24, 2024 am 08:48 AM

Wie finde ich schnell den Standort eines Huawei-Telefons, nachdem es verloren gegangen ist?

So verwenden Sie Karten- und Standortfunktionen in Uniapp Oct 16, 2023 am 08:01 AM

So verwenden Sie Karten- und Standortfunktionen in Uniapp

Methoden zur Lösung des Problems der Speicherleckstelle bei der Go-Sprachentwicklung Jul 01, 2023 pm 12:33 PM

Methoden zur Lösung des Problems der Speicherleckstelle bei der Go-Sprachentwicklung

Einführung in das Löschen einer Inhaltsseite in Word Mar 26, 2024 am 10:06 AM

Einführung in das Löschen einer Inhaltsseite in Word

So ändern Sie die Standortinformationen und die Adresse Mar 12, 2024 pm 09:52 PM

So ändern Sie die Standortinformationen und die Adresse

See all articles