CSS1 によるウィンドウの表現と jQuery Alert Dialogs への適用

CSS jQuery

時間もネタも無いのですが、最低でも一ヶ月一エントリはしときたいので、前回(CSS1 のみで質感のあるボタンを表現してみる)と同じような内容になりますが書いときます。
今回は CSS1 のみで質感のあるウィンドウを表現してみます。また応用として、ダイアログウィンドウを表示するプラグイン jQuery Alert Dialogs に、今回定義する CSS を当てて、見た目を変えてみます。

CSS 定義とマークアップ

ブラック系のウィンドウを２種類定義してみました。html を以下のようにマークアップします。（サンプルでは dl を使ってますが div でも OK です）

<dl class="ex-window-bk1">
	<dt class="ex-window-head"><span>Window</span></dt>
	<dd class="ex-window-body">
		<p>CSS1 Window</p>
	</dd>
</dl>
<dl class="ex-window-bk2">
	<dt class="ex-window-head">Window</dt>
	<dd class="ex-window-body">
		<p>CSS1 Window</p>
	</dd>
</dl>

以下のようなウィンドウが表現できます。

Demo

CSS の定義は以下のようになります。

/* ex-window-bk1 */
.ex-window-bk1{
	margin:0;
	padding:0;
	border:solid 1px #444448;
	background:#747474;
	padding:0px 1px 1px 1px;
}
.ex-window-bk1 .ex-window-head{
	margin:0;
	padding:0 4px;
	font-size:14px;
	border:none;
	border-top:solid 1px #9a9aa1;
	border-bottom:solid 10px #3e3e43;
	background:#6d6d71;
	color:#fff;
	height:10px;
	line-height:10px;
}
.ex-window-bk1 .ex-window-head span{
	position:relative;
	top:5px;
}
.ex-window-bk1 .ex-window-body{
	margin:0;
	border:solid 3px #535353;
	background-color:#f5f5f5;
}

/* ex-window-bk2 */
.ex-window-bk2{
	background-color:#969696;
	border:solid 1px #707070;
}
.ex-window-bk2 .ex-window-head{
	padding:2px 4px;
	border-top:solid 4px #5f5f5f;
	border-right:solid 5px #404040;
	border-bottom:none;
	border-left:solid 5px #404040;
	background:#303030;
	color:#e0e0e0;
}
.ex-window-bk2 .ex-window-body{
	margin:0;
	border-top:solid 1px #5f5f5f;
	border-right:solid 5px #adadad;
	border-bottom:solid 5px #c1c1c1;
	border-left:solid 5px #dcdcdc;
	background-color:#d3d3d3;
}

jQuery Alert Dialogs に適用してみる

jQuery Alert Dialogs に上記の CSS を当ててみたいと思います。プラグインの機能についてはハムさんの下記記事が詳しいです。

プラグインにより生成されるウィンドウの HTML は以下のような構成になります。

<div id="popup_container">
	<div id="popup_title">タイトル</div>
	<div id="popup_content">
		コンテンツ
	</div>
</div>

プラグイン付属の jquery.alerts.css を読み込ませた状態で、それぞれの要素に前述の CSS を当てます。（以下いずれかの CSS 定義を読み込ませます）

exwindow-bk1-alertdialog.css

Demo

#popup_container{
	margin:0;
	padding:0;
	border:solid 1px #444448;
	background:#747474;
	padding:0px 1px 1px 1px;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}
#popup_container #popup_title{
	margin:0;
	padding:4px 0 0;
	font-size:14px;
	border:none;
	border-top:solid 1px #9a9aa1;
	border-bottom:solid 10px #3e3e43;
	background:#6d6d71;
	color:#fff;
	line-height:10px;
}
#popup_container #popup_content{
	margin:0;
	border:solid 3px #535353;
	background-color:#f5f5f5;
}
#popup_content,
#popup_content.alert {
	background-image: url(images/info.gif);
}

#popup_content.confirm {
	background-image: url(images/important.gif);
}
#popup_content.prompt {
	background-image: url(images/help.gif);
}
exwindow-bk2-alertdialog.css

Demo

#popup_container{
	background-color:#969696;
	border:solid 1px #707070;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}
#popup_container #popup_title{
	border-top:solid 4px #5f5f5f;
	border-right:solid 5px #404040;
	border-bottom:none;
	border-left:solid 5px #404040;
	background:#303030;
	color:#e0e0e0;
}
#popup_container #popup_content{
	margin:0;
	border-top:solid 1px #5f5f5f;
	border-right:solid 5px #adadad;
	border-bottom:solid 5px #c1c1c1;
	border-left:solid 5px #dcdcdc;
	background-color:#d3d3d3;
}

#popup_content,
#popup_content.alert {
	background-image: url(images/info.gif);
}
#popup_content.confirm {
	background-image: url(images/important.gif);
}
#popup_content.prompt {
	background-image: url(images/help.gif);
}
ダウンロード

こちらからどうぞ