Authentication




Cancel OK
B!コメントする  2014-02-17 11:10:00 by old

Bootstrap3のalertを指定秒数後に自動で消す

とりたてて珍しいものでも何でもないですけど

<div class="alert alert-danger" id="alertfadeout">
<button type="button" class="close" data-dismiss="alert">×</button>
Syntax Error!!
</div>


こういうアラートがある場合以下のJQueryを追加することで指定秒数後に自動で消すことが出来ます。

<script>
/* bootstrap alertをx秒後に消す */
$(document).ready(function()
{
$(window).load(function()
{
window.setTimeout("$('#alertfadeout').fadeOut()", 8000);
});
});
</script>


bootstrapのalertに

id="alertfadeout"

を付加して、JQuery側でidがalertfadeoutのものは8秒後に見えなくしてしまうというものです。
自分で消すことも出来ますが自動で消えると便利かと思います。

しかし使いどころを考えないと消えたときに表示が動くので一瞬ですが戸惑うことがありますので、消え方やタイミングなどは十分検討した上で導入したほうがよいかもしれません。


Bootstrap  

  • コメント
  • コメントはまだありません