この記事では、JS+CSSに閉じるボタンを備えたDivポップアップウィンドウを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JS+CSSは、閉じるボタンを備えたDiv Popupウィンドウを実装しています</title>
<スクリプト>
function locking（）{
document.all.ly.style.display = "block";
document.all.ly.style.width = document.body.clientwidth;
document.all.ly.style.height = document.body.clientheight;
document.all.layer2.style.display = 'block';
}
function lock_checkform（theform）{
document.all.ly.style.display = 'none'; document.all.layer2.style.display = 'none';
falseを返します。
}
</script>
<style type = "text/css">
<！ -
.style1 {font-size：12px}
A：link {
色：#ffffff;
テキスト装置：なし;
}
A：訪問{
テキスト装置：なし;
}
A：ホバー{
テキスト装置：なし;
}
A：Active {
テキスト装置：なし;
}
- >
</style>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
</head>
<body>
<p align = "center">
<入力型= "ボタン"値= "Popup Div" onclick = "locking（）" />
</p>
<div id = "ly" style = "position：absolute; top：0px; filter：alpha（ofacity = 60）; background-color：＃777;
z-index：2;左：0px;表示：なし; ">
</div>
<！ - フローティングフレームワークの開始 - >
<div id = "layer2" align = "center" style = "position：absolute; z-index：3;左：式（（document.body.offsetwidth-540）/2）; top：expression（（document.body.offsetheight-170）/10）;
バックグラウンドカラー：#fff;表示：なし; ">
<table cellpadding = "0" cellpacing = "0" style = "border：0 solid＃e7e3e7;
国境崩壊：崩壊; ">
<tr>
<td style = "background-color：＃73a2d6; color：#ffff; padding-left：4px; padding-top：2px;
font-weight：bold; font-size：12px; "valign =" Middle ">
<div align = "right"> <a href = javascript :; onclick = "lock_checkform（this）;"> [close] </a> </div> </td>
</tr>
<tr>
<td align = "center">
</td>
</tr>
</table>
</div>
<！ - フローティングフレームワークの終了 - >
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。