Bootstrap alert の表示 or 非表示

概要

• Bootstrap の alert を好きなタイミングで表示 or 非表示させる。

参考

• Bootstrap (3.0)
• Bootstrap alerts (components)
• Bootstrap alerts (javascript)

環境

• Bootstrap 3.0
• jQuery 1.10

• サンプルは firefox 26 で確認。

使用例

• ユーザの動作に対して、alert 表示を出す。
  • javascript の「alert()」だと画面が固まってしまうので、使いたくない。
  • Bootstrap で表示を統一したい場合にも。

実装サンプル

• jsdo.it 上に置いた。

• 以降のサンプルコードとは若干違うところあり。

方法1「 css で操作 」

• css の "display=block" or "display=none" で表示 or 非表示
  • これだけでも要求は満たせる。
  • しかし、ユーザが close ボタンを押してしまうと、それ以降表示されなくなってしまう。

• サンプルページ
  • 一定時間ごとに alert の表示 / 非表示を繰り返す。
  • ユーザが close ボタン ( x の表示 ) を押すと、それ以降表示されない！！

• 該当部分ソースコード

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="alert_col">
            <div class="alert alert-success alert-dismissable" id="alert_sample">
                <button type="button" class="close" data-dismiss="alert" aria-hidden"true">&times;</button>
                Sample alert message
            </div>
        </div>
    </div>
</div>

// 前提：jquery & bootstrap が読み込まれていること。
$(window).ready( function() {

    var update_msec = 3000;

    var hideAlert = function() {
        console.log( 'Hide alert' );
        $('#alert_sample').css( 'display', 'none' );
        setTimeout( showAlert, update_msec );
    };
                
    var showAlert = function() {
        console.log( 'Show alert' );
        $('#alert_sample').css( 'display', 'block' );
        setTimeout( hideAlert, update_msec );
    };
                
    showAlert();
} );

方法2「毎回、要素を作成する」

• 表示毎に要素を作成してしまう。
  • ユーザによって消されても、次回表示時に作成するので問題なし！！
  • プログラム側で消す場合は、非表示ではなく削除にする。
    • 削除は、「element.alert( 'close' )」を使用。

• サンプルページ
  • 一定時間ごとに alert の表示 / 非表示。ランダムで alert の種類を変えるようにした。
  • ユーザが close ボタンを押しても大丈夫！！

• 該当部分ソースコード

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="alert_col"></div>
    </div>
</div>

$(window).ready( function() {
                
    var alerts = [
        { 'type' : 'success', 'message' : 'Success alert' },
        { 'type' : 'info', 'message' : 'Info alert' },
        { 'type' : 'warning', 'message' : 'Warning alert' },
        { 'type' : 'danger', 'message' : 'Danger alert' }
    ];

    var update_msec = 3000;
                
    var createAlert = function( alert_type, message ) {
                
        var alert = document.createElement( 'div' );
        alert.setAttribute( 'id', 'alert_sample' );
        alert.setAttribute( 'class', 'alert alert-' + alert_type + ' alert-dismissable' );
                
        var button = document.createElement( 'button' );
        button.setAttribute( 'type', 'button' );
        button.setAttribute( 'class', 'close' );
        button.setAttribute( 'data-dismiss', 'alert' );
        button.setAttribute( 'aria-hidden', 'true' );
        button.appendChild( document.createTextNode( 'x' ) );
                
        alert.appendChild( button );
        alert.appendChild( document.createTextNode( message ) );
                
        return alert;
    };
            
    var hideAlert = function() {
        console.log( 'Hide alert' );
        $('#alert_sample').alert( 'close' );
        setTimeout( showAlert, update_msec );
    };
                
    var showAlert = function() {
        console.log( 'Show alert' );
        var alert = alerts[ Math.floor( Math.random() * alerts.length ) ];
        $('#alert_col').append( createAlert( alert.type, alert.message ) );
        setTimeout( hideAlert, update_msec );
    };
                
    showAlert();
} );