bootstrap-alerts.jsを使う

twitterのbootstrap cssでbootstrap-alerts.jsというスクリプトがあります

この画像のように右がわにある×をクリックするとボックスを閉じることができるスクリプトです。


本家デモなどはコチラ
http://twitter.github.com/bootstrap/javascript.html#alerts

良さそうなので早速読み込んでみました。

<script type="text/javascript" src="/js/bootstrap-alerts.js"></script>

デモのコピペでためしてみるとうまくいきます。

<div class="alert-message warning fade in" data-alert="alert">
<a class="close" href="#">×</a>
<p>
<strong>Holy guacamole!</strong>
Best check yo self, you’re not looking too good.
</p>
</div>

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

http://twitter.github.com/bootstrap/javascript.html#alerts

ここにあるようにdata-alert="alert"という属性があると動きます。
自分でJavaScriptを書く必要は特にありません。サンプルにあるみたいにclassにclass="fade in"を入れるとたぶんfadeinしているような気がします。

　　　　　　　 ／￣￣＼
　　　　　　／　　_ノ　,ヽ＼
　　　　　　|　　　（ ●）（●）
.　＼　 　　|　　　　 （__人__）　読めばちゃんと書いてあるだろ
　　 .＼　　.|　　　　　｀ ⌒ﾉ
　　　.　＼　ヽ　　　　　 　}
　　　　　 .＼_,ゝ　　　 　ノ　 .　＿＿＿_
　　　　 　／, r､　　　　く　　／　　 　 　＼
　　　　 ./　〈　 ＼　　 　i ／ _ノ 　ヽ､_　　.＼
　　　 .　ヽ､ .ヽ 　 ＼ i.oﾟ(（●）) (（●）)ﾟo　　＼
　　　　　 　.て_）　 　＼|　　 （__人__）'　　　 　　| 　data-alert属性きづかなくて
　　　　　　　　　　　　　＼　　 ｀⌒´ 　 　　 　／　　すげーはまったわ
　　　　　　　　　　　　　　 〉　　　　　　　　､ 〈
　　　　　　　　　　　　　_ノ　入　　　　/　 /　|
　　　　　　　　　　　　(⌒_ノ　 ＼　　/ ／ 　/
　　　　　　　　　　　　 ￣　　　 　＼(.__) _／｀)
　　　　　　　　　　　　　　　　　 　 　＼ /―i'.|

ちゃんと読まないとね