この章では、ボタンをクリックして中央のウィンドウをポップアップする方法を紹介します。このウィンドウには、この効果がより一般的になります。もちろん、より複雑な実装方法があります。 。
コードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Meta name = "Author" content = "http://www.softwhy.com/"/>
<title> ant tribe </title>
<style type = "text/css">
#fade {
表示：なし;
位置：絶対;
トップ：0％;
左：0％;
幅：100％;
高さ：100％;
背景色：黒;
Z-Index：1001;
-moz-opacity：0.8;
不透明：.80;
フィルター：アルファ（不透明度= 80）;
}
＃ライト{
表示：なし;
位置：絶対;
トップ：25％;
左：25％;
幅：50％;
高さ：50％;
パディング：16px;
ボーダー：3pxソリッドオレンジ;
背景色：白。
Z-Index：1002;
オーバーフロー：自動;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var linkbt = document.getElementById（ "linkbt"）;
var light = document.getElementById（ 'light'）;
var fade = document.getElementById（ 'フェード'）;
var closebt = document.getElementById（ "closebt"）;
linkbt.onclick = function（）{
light.style.display = 'block';
fade.style.display = 'block';
}
closebt.onclick = function（）{
light.style.display = 'none';
fade.style.display = 'none';
}
}
</script>
</head>
<body>
<a href = "javascript：void（0）" id = "linkbt">ここをクリックしてウィンドウを開きます</a>
<div id = "light"> <a href = "javascript：void（0）" id = "closebt"> close window </a> </div>
<div id = "fade" "> </div>
</body>
</html>
上記のコードは当社の要件を実装し、以下はその実装プロセスを簡単に導入します。
1。実装の原則：
デフォルトでは、マスクレイヤーとウィンドウがリンクをクリックした後、マスクレイヤーを表示し、マスクレイヤーを半透明状態に設定できます。どちらの要素も絶対的な位置決めを使用し、中央ウィンドウのz-index属性値をマスク層より大きく設定して、マスク層で覆うことができます。閉じるボタンがクリックされると、マスクレイヤーとウィンドウを隠すことができ、原理はほぼ同じです。