HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

コードをコピー

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

<!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; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイルタイプ="text/css">
/*ポップアップレイヤーのスタイル*/
html、本文 {高さ:100%; 余白:0px; フォントサイズ:12px;}
.mydiv {
背景色: #ff6;
境界線: 1px 実線 #f90;
テキスト配置: 中央;
行の高さ: 40px;
フォントサイズ: 12px;
フォントの太さ: 太字;
zインデックス:99;
幅: 300ピクセル;
高さ: 120px;
左:50%;/*FF IE7*/
上: 50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 ではこの値は幅の半分になります*/
margin-top:-60px!important;/*FF IE7 この値は自身の高さの半分です*/
上マージン:0px;
位置:fixed!important;/*FF IE7*/
位置:絶対;/*IE6*/
_top: 式(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ですか?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
背景色: #ccc;
幅: 100%;
高さ: 100%;
左:0;
トップ:0;/*FF IE7*/
フィルター:アルファ(不透明度=50);/*IE*/
不透明度:0.5;/*FF*/
zインデックス:1;
位置:fixed!important;/*FF IE7*/
位置:絶対;/*IE6*/
_top: 式(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ですか?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*終わり*/
</スタイル>
<script type="text/javascript">
関数 showDiv(){
document.getElementById('popDiv').style.display='ブロック';
document.getElementById('bg').style.display='ブロック';
}
関数closeDiv(){
document.getElementById('popDiv').style.display='なし';
document.getElementById('bg').style.display='なし';
}
</スクリプト>
</head>
<本文>
<div id="popDiv" class="mydiv" style="display:none;">タイトル<br/>ご存知のとおり<br/>
<a href="javascript:closeDiv()">ウィンドウを閉じる</a></div>
<div id="bg" class="bg" style="display:none;"></div>

<div style="padding-top: 20px;">
<input type="送信" name="" value="レイヤーを表示" onclick="javascript:showDiv()" />
</div>
</本文>
</html>

素敵なスタイルを追加する

コードをコピー

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

<html>
<head><タイトル></title>
<スタイル>
.mesウィンドウトップ{
フォントサイズ: 12px;
フォントの太さ: 太字;
テキスト配置: 左;
}
.mesウィンドウコンテンツ{
フォントサイズ: 12px;
}
.mesウィンドウ{
背景: なし繰り返しスクロール 0 0 #FFFFFF;
境界線: 1px 実線 #666666;
}
</スタイル>
</head>
<本文>
<div id="mesWindow" class="mesWindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><div class="mesWindowTop"><table width="100%" height="100%"><tbody><tr><td>ウィンドウのタイトル</td><td style="width:1px;"><input type="button" value="Close" class="close" title="ウィンドウを閉じる" onclick="closeWindow();"></td></tr></tbody></table></div><div id="mesWindowContent" class="mesWindowContent"><div style="padding:20px 0 20px 0;text-align:center">メッセージ本文</div></div><div class="mesWindowBottom"></div></div>
</本文>
</html>

<<: 25 div+css プログラミングのヒントとコツ

>>: MYSQL データベースの基礎 - 結合操作の原理