この記事では、JSによるマスクレイヤーポップアップフレームを実装する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
昨日、会社のウェブサイトはいくつかの情報を促すためにポップアップウィンドウを必要とし、ポップアップJSコードとポップアップウィンドウHTMLを一緒に書くように頼みました。
私はそれほど言いません、コードをアップロードするだけで、間違いなく互換性の問題があると感じています。あなたがそれを見たらそれを指摘してください：
次のようにコードをコピーします：<style>
＃h-dialog {display：none; position：absolute; z-index：999999; width：400px; height：auto;バックグラウンドカラー：#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;フォントサイズ：20px; Line-Height：40px;}
＃h-dialog #msgcont {height：36px;マージン：30px 0 50px;パディング左：65px; font-size：25px; line-height：36px; vertical-align：middle;背景：url（../ images/ui_alert.png）繰り返し20px 50％;}
</style>
<div id = "h-dialog">
<onclick = "popupclose（this）">×</a>
<div> tip </div>
<div id = "msgcont"> content </div>
</div>
<script type = "text/javascript">
//背景画面をロックします
function lockscreen（）{
var clienth = document.body.offsetheight; //体の高さ
var clientw = document.body.offsetwidth; //ボディ幅
var doch = document.body.scrollheight; //ブラウザの高さ
var docw = document.body.scrollwidth; //ブラウザ幅
var bgw = clientw> docw？ ClientW：docw; //有効な幅を取得します
var bgh = clienth> doch？ ClientH：Doch; //有効な高値を取得します
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）;
}
//ボタンイベントを閉じます
関数popupclose（el）{
var blackbg = document.getElementById（ "blackbg"）;
Blackbg && document.body.removechild（blackbg）;
el.parentnode.style.display = "none";
}
//起源
function autoclose（id）{
id = id || 「h-dialog」;
var blackbg = document.getElementById（ "blackbg"）;
var objdiv = document.getElementById（id）;
setimeout（function（）{
Blackbg && document.body.removechild（blackbg）;
objdiv.style.display = "none";
}、2000）;
}
/**
*関数：ポップアップ情報
*パラメーター1：情報コンテンツのプロンプト
*パラメーター2：デフォルトの迅速な情報ステータスは0です。プロンプト情報は1です。成功情報はです
*パラメーター3：ポップアップDIVのID、デフォルトの「H-Dialog」
*パラメーター4：ポップアップウィンドウコンテンツのID、デフォルト「MSGCont」
**/
関数showmsg（msg）{
msg = msg || 「再入力してください」。
var status = arguments [1] || 0、
popupid = arguments [2] || 「H-Dialog」、
contentid = arguments [3] || 「msgcont」;
lockscreen（）;
//画面の実際の高さと幅
var pagewidth = window.innerwidth;
var pageheight = window.innerheight;
if（typeof pagewidth！= "number"）{
if（document.compatmode == "css1compat"）{
pagewidth = document.documentelement.clientWidth;
pageheight = document.documentelement.clientheight;
} それ以外 {
pageWidth = document.body.clientWidth;
pageheight = document.body.clientheight;
}
}
//スクロールバーの高さと幅があります
var scrollleft = window.document.documentelement.scrollleft;
var scrolltop = 0;
if（typeof windof.pageyoffset！= 'undefined'）{
scrolltop = window.pageyoffset;
} else if（typeof windof.document.compatmode！= 'undefined' &&
window.document.compatmode！= 'backcompat'）{
scrolltop = window.document.documentelement.scrolltop;
} else if（typeof windof.document.body！= 'undefined'）{
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/assets/images/ui_success.png）No-Reepeat 20px 50％";
}
document.getElementById（contentid）.innerhtml = msg;
objdiv.style.display = "block";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
Autoclose（popupid）;
}
</script>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。