HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html"; 文字セット="utf-8" />
<title>ライトボックスの例</title>
<スタイル>
* {
マージン:0;
パディング:0
}
html、本文{
高さ: 100%;
幅: 100%;
フォントサイズ:12px
}
.white_content {
表示: なし;
位置: 絶対;
上位: 25%
左: 25%;
幅: 50%;
パディング: 6px 16px;
境界線: 12px 実線 #D6E9F1;
背景色: 白;
zインデックス:1002;
オーバーフロー:自動;
}
.black_overlay {
表示: なし;
位置: 絶対;
トップ: 0%;
残り: 0%;
幅: 100%;
高さ: 100%;
背景色:#f5f5f5;
zインデックス:1001;
-moz-不透明度: 0.8;
不透明度:.80;
フィルター: アルファ(不透明度=80);
}
。近い {
フロート:右;
クリア:両方;
幅:100%;
テキスト配置:右;
マージン:0 0 6px 0
}
.close a {
色:#333;
テキスト装飾:なし;
フォントサイズ:14px;
フォントの太さ:700
}
.con {
テキストインデント:1.5pc;
行の高さ:21px
}
</スタイル>
<スクリプト>
関数 show(タグ){
var light = document.getElementById(タグ);
var フェード = document.getElementById('フェード');
light.style.display='ブロック';
fade.style.display='ブロック';
}
関数hide(タグ){
var light = document.getElementById(タグ);
var フェード = document.getElementById('フェード');
light.style.display='なし';
fade.style.display='なし';
}
</スクリプト>
</head>
<本文>
<a href="javascript:void(0)" onclick="show('light')">開く 1</a>
<a href="javascript:void(0)" onclick="show('light2')">開く 2</a>
<div id="light" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> 閉じる</a></div>
<div class="con">
コンテンツ 1 コンテンツコンテンツ...
</div>
</div>
<div id="light2" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> 閉じる</a></div>
<div class="con">
コンテンツ2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</本文>
</html>

コードはすべて上記にあります。コピーして試してみてください...ポップアップレイヤーのサイズは設定でき、比例することもできます

<<: LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

>>: VUE v-for の :key の詳細な説明