jQueryでアラート表示

BootStrapでいい感じのアラート表示がなかったので、自分で作ってみた。

処理としては上からむくって出てきて、３秒後にむくって出てきた方へ引っ込む感じのやつ。
ツイッターで投稿した時に出てくるやつと似てる感じ。というか同じ。

以下コード
本体

<script type="text/javascript">
      $(function(){
        $(".alert").css("display", "none");
        
        if($('.alert').text() != ''){
          $(".alert").css({
            'display' : 'block',
            'width' : '500px',
            'position': 'fixed',
            'top' : '-60px',
            'left' : '50%',
            'margin-left': '-250px',
            'background-color' : '#3498db',
            'border' : '1px solid',
            'font-weight': 'bold',
            'color': '#FFFFFF'
          }).animate({
            'top' : '25px'
          },1000).delay(3000).animate({
            'top' : '-60px'
          },1000);
        }
      });
</script>

呼び出し方法

<div class="alert"><%= notice %><%= alert %></div>

classでalert指定してあげれば出てくるようになる。
判定処理でテキストが入っている場合出して、""の場合は出現しないように処理を書いています。

結構これ使えると思う。まぁ、くそコードですが。。。
少しでもお役に立てると幸いです。
jqueryたんのしいいいいい！

■gaku様の一言
やっぱフロントサイド開発はたのしいです(・ω<)