libro
www.tuyano.com
初心者のためのBootstrap入門

アラート・ダイアログ・折りたたみ表示 (2/5)

作成:2017-03-18 08:43
更新:2017-03-18 08:43

■アラート表示のON/OFF

このアラートは、ページに最初っから表示しっぱなしのものです。ただのデザインなのです。が、実際のアラートは、必要に応じて画面に表示したり、あるいはクローズボックスで閉じたりできないといけないでしょう。

こうしたアラートらしい操作のためには、いくつか追加する要素が必要です。まず、アラートの中にクローズボックスの表示を用意する必要があるでしょう。そして、アラートを表示するためのボタンなども用意しておくことになるでしょう。

・クロースボックス
<a href="#" data-dismiss="alert" >×</a>
クローズボックスは、<a>タグとして用意しておきます。これは、「data-dismiss="alert"」という属性を必ず用意して作成します。これを用意することで、アラートの右上にクローズボックスを表示できます。なお、クローズボックスの「×」は、<a>タグに「×」を表示させることで作ります。

閉じて消える際にエフェクトを掛けることもできます。これは、アラートの<div>タグに「fade in」のクラスを追加します。これで「じわっ」とアラートを消すことができるようになります。


■アラートを表示させる

これで「クリックして閉じるアラート」でできました。では、アラートを非表示にしておいて、ボタンなどをクリックして表示させるにはどうするのでしょう？

・アラートを非表示にしておく
これは、実は簡単です。スタイルを設定して隠しておけばいいのです。アラートの<div>タグに、こんな形でスタイル設定すればいいでしょう。
style="display:none;"

・アラートを表示する
アラートを表示させるには、非表示になっている<div>タグを表示させればいいことになります。これは、jQueryのshowメソッドを使うのが簡単でしょう。
$( アラート・タグの指定 ).show();
<button>タグなどから、onclickでこのように実行すれば、クリックしてアラートを表示させることができるようになります。

では、簡単な利用例を挙げておきましょう。ページにアクセスし、「Show Alert」ボタンを押すとアラートが表示されます。そしてクローズボックスをクリックすれば、アラートを閉じます。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

</head>
<body >
    
<div class="container">
            
<div class="row">
    <div class="col-md-12">
        
        <div class="page-header">
            <h1>アラート・ダイアログ</h1>
            <h2 >Alert</h2>
        </div>
        
        <div>
        <button class="btn btn-default" onclick="$('#alert').show()">
            Show Alert</button>
        </div>

        <div>　</div>

        <div id="alert" class="alert alert-success fade in" style="display:none;">
            <a href="#" class="close" data-dismiss="alert" 
                aria-label="close">×</a>
            <h4>Alert!</h4>
            これは、アラートの表示です。
        </div>

    </div>
</div>
    
</div>

</body>
</html>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る