Lapisan pop-up js selalu berpusat pada ide dan kode implementasi

Penulis：Eve Cole Waktu Pembaruan：2025-03-03 01:32:01

Jendela pop-up selalu berada di tengah

Copy kode kodenya sebagai berikut:

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

jendela.onload=fungsi(){

jika(adalahIE){

window.onscroll=doIE;

jendela.onresize=doIE; }

fungsi doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var lebar=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';

Pertama-tama, setiap orang perlu memahami gaya css yang tidak kompatibel position:fixed;

Atribut Posisi memiliki empat nilai opsional: statis, absolut, tetap, relatif.

Mari kita pelajari perbedaan kegunaannya bersama-sama. Selama belajar, kita harus memikirkan yang mana yang harus digunakan dalam situasi tata letak apa.

position:static Tidak ada positioning Nilai atribut ini adalah positioning default dari semua elemen. Dalam keadaan normal, kita tidak perlu mendeklarasikannya secara spesifik, namun terkadang saat menghadapi pewarisan, kita tidak ingin melihat dampak dari atribut yang diwarisi oleh elemen tersebut. . sendiri, sehingga Anda dapat menggunakan position:static untuk membatalkan pewarisan, yaitu mengembalikan nilai default pemosisian elemen. Misalnya: #nav { position:static; } Dua lainnya yang disebutkan sebelumnya, kita terutama berbicara tentang posisi tetap: tetap Apa arti nilai atribut positioning relatif terhadap posisi tetap jendela? Elemen diposisikan mirip dengan absolut, tetapi blok yang memuatnya adalah area pandang itu sendiri. Di media layar seperti browser web, elemen tidak berpindah dalam tampilan browser saat dokumen di-scroll. Misalnya, ini memungkinkan tata letak gaya bingkai. Pada media halaman seperti hasil cetakan, elemen tetap muncul pada posisi yang sama pada halaman pertama. Ini dapat digunakan untuk menghasilkan judul atau catatan kaki yang mengalir. Kami telah melihat efek serupa, tetapi sebagian besar tidak dicapai melalui CSS, tetapi menggunakan skrip JS. Harap dicatat bahwa IE6 tidak mendukung...

Di sini kami menggunakan position:fixed; + "hack technology" + "javascript";

Copy kode kodenya sebagai berikut:

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

< meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />

<title>Insinyur Front-end Tusheng</title>

< tipe gaya="teks/css">

isi,div{margin:0; bantalan:0;}

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

</ /gaya>

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

jendela.onload=fungsi(){

jika(adalahIE){

window.onscroll=doIE;

jendela.onresize=doIE; }

fungsi lakukanIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var lebar=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

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

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

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

</kepala>

<tubuh>

<br/

< /tubuh>

< /html>