Die Popup-Ebene von js konzentriert sich immer auf Implementierungsideen und Code

Autor：Eve Cole Aktualisierungszeit：2025-03-03 01:32:01

Das Popup-Fenster ist immer zentriert

Kopieren Sie den Codecode wie folgt:

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE;

Funktion doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("oneReply");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px' </script>;

Zunächst muss jeder den inkompatiblen CSS-Stil position:fixed verstehen;

Das Positionsattribut hat vier optionale Werte: statisch, absolut, fest, relativ.

Lassen Sie uns gemeinsam ihre unterschiedlichen Verwendungsmöglichkeiten kennenlernen. Während des Studiums sollten wir darüber nachdenken, welche davon in welcher Layout-Situation verwendet werden sollte.

position:static Keine Positionierung Dieser Attributwert ist die Standardpositionierung aller Elemente. Unter normalen Umständen müssen wir ihn nicht speziell deklarieren, aber manchmal möchten wir bei Vererbung die Auswirkungen der vom Element geerbten Attribute nicht sehen . selbst, sodass Sie position:static verwenden können, um die Vererbung abzubrechen, d. h. den Standardwert der Elementpositionierung wiederherzustellen. Zum Beispiel: #nav { position: static } Die anderen beiden wurden bereits erwähnt: Feste Position: Fest Was bedeutet der Positionierungsattributwert relativ zur festen Positionierung des Fensters? Das Element wird ähnlich wie „absolut“ positioniert, sein enthaltender Block ist jedoch das Ansichtsfenster selbst. In Bildschirmmedien wie Webbrowsern bewegen sich Elemente beim Scrollen des Dokuments nicht in der Browseransicht. Beispielsweise ist ein Layout im Rahmenstil möglich. Bei Seitenmedien wie Ausdrucken erscheint ein festes Element an derselben Position auf der ersten Seite. Damit lassen sich fließende Titel oder Fußnoten generieren. Wir haben ähnliche Effekte gesehen, die meisten davon werden jedoch nicht durch CSS, sondern durch die Verwendung von JS-Skripten erreicht. Bitte beachten Sie, dass IE6 nicht unterstützt...

Hier verwenden wir position:fixed; + „hack technology“ + „javascript“;

Kopieren Sie den Codecode wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

<Kopf>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tusheng Front-End-Ingenieur</title>

< style type="text/css">

body,div{margin:0; padding:0;}

#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;}

</style>

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE;

Funktion doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("a");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script>

</head>

<Körper>

< /body>

< /html>