Cara mengimplementasikan kotak pop-up layer topeng

Artikel ini menjelaskan metode menerapkan bingkai pop-up layer topeng oleh JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

Kemarin, situs web perusahaan membutuhkan jendela pop-up untuk meminta beberapa informasi, dan meminta saya untuk menulis kode JS pop-up dan jendela pop-up html bersama-sama, sebut saja di mana pun Anda membutuhkannya.

Saya tidak akan banyak bicara, cukup unggah kode, dan saya merasa bahwa pasti akan ada masalah kompatibilitas. Harap tunjukkan jika Anda melihatnya:

Salin kode sebagai berikut: <tyle>

#H-dialog {display: none; position: absolute; z-index: 999999; lebar: 400px; tinggi: auto; latar belakang-warna: #fff;}

#H-dialog .close {float: right; font-size: 30px; margin-right: 10px; margin-top: 5px; kursor: pointer;}

#H-dialog .title {height: 40px; padding-left: 10px; font-size: 20px; Line-Height: 40px;}

#H-dialog #msgcont {height: 36px; margin: 30px 0 50px; padding-kiri: 65px; font-size: 25px; line-height: 36px; vertikal-align: tengah; Latar belakang: url (../ gambar/ui_alert.png) no-repeat 20px 50%;}

</tyle>

<Div id = "h-dialog">

<a onClick = "popupclose (this)"> × </a>

<div> TIP </Div>

<Div id = "msgcont"> konten </div>

</div>

<type skrip = "Teks/JavaScript">

// Kunci layar latar belakang

fungsi lockscreen () {

var clienth = document.body.offsetHeight; // Tinggi tubuh

var clientw = document.body.offsetWidth; // Lebar tubuh

var doch = document.body.scrollHeight; // Tinggi browser

var docw = document.body.scrollwidth; // Lebar browser

var bgw = clientw> docw? clientw: docw; // Dapatkan lebar yang valid

var bgh = clienth> doch? Clienth: Doch; // Dapatkan yang valid tinggi

var blackbg = document.createelement ("div");

blackbg.id = "blackbg";

blackbg.style.position = "absolute";

blackbg.style.zindex = "99999";

blackbg.style.top = "0";

blackbg.style.left = "0";

blackbg.style.width = bgw+"px";

blackbg.style.height = bgh+"px";

blackbg.style.opacity = "0.4";

blackbg.style.backgroundColor = "#333";

Document.Body.AppendChild (BlackBG);

}

// Tutup acara tombol

fungsi popupclose (el) {

var blackbg = document.geteLementById ("blackbg");

blackbg && document.body.removechild (blackbg);

el.parentnode.style.display = "none";

}

// berasal

fungsi autoclose (id) {

id = id || "H-dialog";

var blackbg = document.geteLementById ("blackbg");

var objDiv = document.getElementById (id);

setTimeout (function () {

blackbg && document.body.removechild (blackbg);

objdiv.style.display = "none";

}, 2000);

}

/**

*Fungsi: Informasi pop-up

* Parameter 1: Konten Informasi Prompt

* Parameter 2: Status Informasi Prompt Default adalah 0. Informasi Prompt adalah 1. Informasi Keberhasilan adalah

* Parameter 3: ID dari pop-up div, default "h-dialog"

* Parameter 4: ID konten jendela pop-up, default "msgcont"

**/

fungsi showmsg (msg) {

msg = msg || "Harap perbaiki kembali";

var status = argumen [1] || 0,

popupid = argumen [2] || "H-dialog",

contentId = argumen [3] || "msgcont";

LockScreen ();

// Tinggi dan lebar layar yang sebenarnya

var pagewidth = window.innerwidth;

var pageHeight = window.innerheight;

if (typeof pagewidth! = "number") {

if (document.compatmode == "css1compat") {

pagewidth = document.documentelement.clientwidth;

pageHeight = document.documentelement.clientHeight;

} kalau tidak {

pagewidth = document.body.clientwidth;

pageHeight = document.body.clientHeight;

}

}

// bilah gulir memiliki tinggi dan lebar

var scrollleft = window.document.documentelement.scrollleft;

var scrolltop = 0;

if (typeof window.pageyoffset! = 'tidak terdefinisi') {

scrolltop = window.pageyoffset;

} lain jika (typeof window.document.compatmode! = 'tidak terdefinisi' &&

window.document.compatmode! = 'backcompat') {

scrolltop = window.document.documentelement.scrolltop;

} lain jika (typeof window.document.body! = 'tidak terdefinisi') {

scrolltop = window.document.body.scrolltop;

}

var div_x = (pagewidth - 400) / 2 + scrollleft;

var div_y = (pageHeight - 200) / 2 + scrolltop;

var objdiv = document.getElementById (popupid);

if (status) {

document.geteLementById (contentId) .style.background = "url ($ root/aset/gambar/ui_success.png) no-repeat 20px 50%";

}

document.getElementById (contentId) .innerHtml = msg;

objdiv.style.display = "block";

objdiv.style.left = div_x + "px";

objdiv.style.top = div_y + "px";

autoklose (popupid);

}

</script>

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.