JavaScript + Ajax 実践サンプル集

メッセージボックス

説明補足説明コードコメント投稿

このサンプル、メッセージをボックス上に表示して見栄えをよくします。警告メッセージ、エラーメッセージ、正常時のメッセージを表示するときに利用すると便利です。ボックスには、クリーン、アイコン付き、ソリッド、角が丸い、矢印付きなどの種類があります。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Message Box</title>
<style type="text/css">
/* --------------------------------- */
/* CSS RESET	  					*/
body{margin:0; border:0; padding:0;}

/* --------------------------------- */
/* STANDARD TAG  					*/
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}

/* --------------------------------- */
/*CONTAINER		  					*/
#container{ 
	margin:0 auto;
	margin-top:40px;
	width:260px;
}

/* --------------------------------- */
/*MESSAGE BOX CLEAN	serie	  		 */
	.clean-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-yellow{
		border:solid 1px #DEDEDE; 
		background:#FFFFCC;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-ok{
		border:solid 1px #349534; 
		background:#C9FFCA;
		color:#008000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.clean-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}

/* --------------------------------- */
/*MESSAGE BOX Iconized	  		 */
	.icon-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.icon-yellow{
		border:solid 1px #DEDEDE; 
		background:#FFFFCC url(assets/css/cssbox/icon-yellow.png) 8px 6px no-repeat;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.icon-ok{
		border:solid 1px #90ac13; 
		background:#eef4d3 url(assets/css/cssbox/icon-green.png) 8px 6px no-repeat;
		color:#6b800d;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.icon-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA url(assets/css/cssbox/icon-red.png) 8px 6px no-repeat;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/*MESSAGE BOX SOLID	serie	  		 */

.solid-gray{
		background:#444444;
		color:#FFFFFF;
		padding:4px;
		text-align:center;
	}
	.solid-yellow{
		background:#FFFFCC;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.solid-ok{
		background:#008000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.solid-error{
		background:#CC0000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/* ROUNDED ALTERNATE	  		 	*/

/* ---------------------------------------------------------------------- */
	.round-a-gray{
		background:#444444 url(assets/css/cssbox/round_gray-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-gray div{
			background:url(assets/css/cssbox/round_gray-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-ok{
		background:#008000 url(assets/css/cssbox/round_green-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-ok div{
			background:url(assets/css/cssbox/round_green-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-error{
		background:#CC0000 url(assets/css/cssbox/round_red-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-error div{
			background:url(assets/css/cssbox/round_red-right.png) right bottom no-repeat;
			padding:4px;
		}
		
/* --------------------------------- */
/* TOOLTIPS				  		 	*/

/* ---------------------------------------------------------------------- */
	.tooltips-gray{
		background:#444444;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-gray div{
			background:url(assets/css/cssbox/tips_gray.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-ok{
		background:#008000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-ok div{
			background:url(assets/css/cssbox/tips_green.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-error{
		background:#CC0000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-error div{
			background:url(assets/css/cssbox/tips_red.png) left bottom no-repeat;
			margin-top:4px;
			height:18px;
		}
</style>
</head>

<h1>Clean</h1>
<div class="clean-gray">クリーンメッセージボックス (gray)</div><br />
<div class="clean-yellow">クリーンメッセージボックス (yellow)</div><br />
<div class="clean-ok">クリーンＯＫ！メッセージボックス</div><br />
<div class="clean-error">クリーンエラーメッセージボックス</div><br /><br /><br />

<h1>Iconized</h1>
<div class="icon-yellow">クリーンメッセージボックス</div><br />
<div class="icon-ok">クリーンＯＫ!メッセージボックス</div><br />
<div class="icon-error">クリーンエラーメッセージボックス</div><br /><br /><br />

<h1>Solid</h1>
<div class="solid-gray">ソリッドメッセージボックス (gray)</div><br />
<div class="solid-yellow">ソリッドメッセージボックス (yellow)</div><br />
<div class="solid-ok">ソリッドOK!メッセージボックス</div><br />
<div class="solid-error">ソリッドエラーメッセージボックス</div><br /><br /><br />

<h1>Rounded Alternate</h1>
<div class="round-a-gray"><div>ソリッドメッセージボックス</div></div><br />
<div class="round-a-gray"><div>
<strong>ソリッドメッセージボックスチップ</strong><br />
ボックスの左上と右下に丸みが付きます。
</div></div>

<br />

<div class="round-a-ok"><div>ソリッドＯＫメッセージ</div></div><br />
<div class="round-a-ok"><div>
<strong>ソリッドＯＫメッセージチップ</strong><br />
このボックスはチップなどを表示するときに利用すると便利です。
</div></div>

<br />

<div class="round-a-error"><div>ソリッドエラーメッセージ</div></div><br />
<div class="round-a-error"><div>
<strong>ソリッドエラーメッセージチップ</strong><br />
このボックスはチップなどを表示するときに利用すると便利です。
</div></div>

<h1>Tooltips</h1>
<div class="tooltips-gray">ソリッドツールチップ (gray)<div></div></div><br />
<div class="tooltips-ok">ソリッドツールチップ (green)<div></div></div><br />
<div class="tooltips-error">ソリッドツールチップ (red)<div></div></div>

</div>
</body>
</html>

このサンプルを編集して試してみる!

メッセージボックスを適用するには、div要素にclass属性を追加してお好みのCSSのクラス名を設定します。

<div class="clean-gray">クリーンメッセージボックス (gray)</div>

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

メッセージボックス