js untuk melaksanakan kemahiran kotak_javascript pop timbul lapisan topeng

Contoh dalam artikel ini menerangkan cara melaksanakan kotak pop timbul lapisan topeng dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Semalam, tapak web syarikat memerlukan tetingkap timbul untuk menggesa beberapa maklumat, saya diminta untuk menulis kod js tetingkap timbul dan html tetingkap timbul bersama-sama dan memanggilnya di mana sahaja yang diperlukan

Tidak banyak yang boleh dikatakan, mari terus ke kod saya rasa pasti akan ada masalah keserasian jika anda melihatnya:

Salin kod Kod adalah seperti berikut: #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;} #H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor: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-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;} × 提示 内容 //Kunci skrin latar belakang Skrin kunci fungsi() { var clientH = document.body.offsetHeight; //tinggi badan var clientW = document.body.offsetWidth; var docH = document.body.scrollHeight; //Ketinggian penyemak imbas var docW = document.body.scrollWidth; //Lebar penyemak imbas var bgW = clientW > docW : docW; var bgH = clientH > docH ? var blackBg = document.createElement("div"); blackBg.id = "blackBg"; blackBg.style.position = "mutlak"; 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 butang Fungsi popupClose(el) { var blackBg = document.getElementById("blackBg"); blackBg && document.body.removeChild(blackBg); el.parentNode.style.display = "tiada"; } //Tutup secara automatik 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 = "tiada"; },2000); } /** *Fungsi: Mesej pop timbul *Parameter 1: Kandungan mesej gesaan *Parameter 2: Status maklumat gesaan lalai ialah 0 untuk maklumat segera, 1 untuk maklumat kejayaan *Parameter 3: Id div pop timbul, lalai ialah "H-dialog" *Parameter 4: Id kandungan tetingkap timbul, lalai "msgCont" **/ Fungsi showMsg(msg) { msg = msg ||. "Sila cuba lagi"; status var = argumen[1] || popupId = argumen[2] ||. "H-dialog", contentId = argumen[3] ||. "msgCont"; lockScreen(); //Ketinggian dan lebar skrin sebenar var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; Jika (jenis pageWidth != "nombor") { Jika (document.compatMode == "CSS1Compat") { pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } lain { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } //滚动条高宽 var scrollLeft = window.document.documentElement.scrollLeft; var scrollTop = 0; if (typeof window.pageYOffset != 'undefined') { scrollTop = window.pageYOffset; } else if (typeof window.document.compatMode != 'undefined' && window.document.compatMode != 'BackCompat') { scrollTop = window.document.documentElement.scrollTop; } else if (typeof window.document.body != 'undefined') { scrollTop = window.document.body.scrollTop; }

var div_X = (lebar halaman - 400) / 2 tatal ke kiri; var div_Y = (pageHeight - 200) / 2 scrollTop; var objDiv = document.getElementById(popupId); jika (status) { document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) tiada ulangan 20px 50%"; } document.getElementById(contentId).innerHTML = msg; objDiv.style.display = "sekat"; objDiv.style.left = div_X "px"; objDiv.style.top = div_Y "px"; autoClose(popupId); }

希望本文所述对大家的javascript程序设计有所帮助。