閉じるアイコンを使いアラート・メッセージを閉じる ≪ アラート・メッセージ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

閉じるアイコンを使いアラート・メッセージを閉じるサンプル。

class属性にcloseを指定したbutton要素のdata-dismiss属性に、alertを指定する。
閉じるボタンは、アラートの要素内に配置する。

サンプル

成功アラート

情報アラート

警告アラート

危険アラート

ソースコード

<div class="alert alert-success alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">&times;</span>
	</button>
	<strong>成功</strong>アラート
</div>
<div class="alert alert-info alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">&times;</span>
	</button>
	<strong>情報</strong>アラート
</div>
<div class="alert alert-warning alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">&times;</span>
	</button>
	<strong>警告</strong>アラート
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert">
		<span aria-hidden="true">&times;</span>
	</button>
	<strong>危険</strong>アラート
</div>