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

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

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

■ダイアログのオープン・クローズ

ダイアログは、ただ表示のタグを用意しただけでは使えません。ダイアログを呼び出して表示したり、閉じたりするための仕組みも用意する必要があります。


●ダイアログのオープン
ダイアログを開くには、<a>タグを利用します。これは以下のような形になります。
<a href="ダイアログの指定" data-toggle="modal">……</a>
hrefで、開くダイアログの<div>タグを指定します。これはIDを使って指定すればいいでしょう。タグには、data-toggle="modal"という属性を用意しておきます。これにより、hrefに指定したIDのダイアログが表示されるようになります。


●ダイアログのクローズ
ダイアログを閉じるには、これも<a>タグを用意すればいいでしょう。これは、ダイアログのタグ内（通常は、フッターのタグ内）に用意します。
<a href="#" data-dismiss="modal">……</a>
属性として、data-dismiss="modal"を用意しておきます。これにより、自動的にダイアログを閉じることができます。


では、実際に簡単なダイアログを呼び出すサンプルを挙げておきましょう。ここでは、「Show Dialog」ボタンをクリックするとダイアログが現れます。ダイアログにある「Close」ボタンをクリックするとダイアログが閉じられます。

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

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 >Dialog</h2>
        </div>
        
        <a href="#dialog" role="button" 
            class="btn btn-default" data-toggle="modal">Show Dialog</a>
            
        <div class="modal fade" id="dialog" role="dialog" 
            aria-labelledby="dlogLabel" aria-hidden="true">

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                         <h4 class="modal-title" id="dlogLabel">
                            Dialog!
                        </h4>
                    </div>
                    <div class="modal-body">
                        これは、ダイアログのメッセージです。
                    </div>

                    <div class="modal-footer">
                        <a href="#" role="button" class="btn btn-default" 
                            data-dismiss="modal">Close</a> 
                    </div>
                </div>
                
            </div>
            
        </div>

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

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

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