Bootstrap(モーダルの使い方)

Tag:

Bootstrapのモーダルについて取り上げます。基本的な使い方やイベント処理など、デモを通じて確認してみてください。

基本的な使い方

デモ

ソース

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">タイトル</h4>
            </div>
            <div class="modal-body">
                モーダルテストです。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

解説

1行目にモーダルを表示するボタンを記述してます。data-target属性でidやclassを指定します。ボタンをクリックすると、対応するidやclassの要素がモーダル表示されます。

3行目から18行目にモーダルで表示する内容を記述してます。

7行目と14行目にてdata-dismiss属性を記述してモーダルを閉じれるようにしてます。

モーダルのサイズ変更

デモ

ソース

<!-- Large modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-large">Large modal</button>

<div class="modal fade" id="myModal-large" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">  <!-- modal-lgを指定 -->
        <!-- 省略 -->
    </div>
</div>

<!-- Default modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-default">Default modal</button>

<div class="modal fade" id="myModal-default" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <!-- 省略 -->
    </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-sm">Small modal</button>

<div class="modal fade" id="myModal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">   <!-- modal-smを指定 -->
        <!-- 省略 -->
    </div>
</div>

解説

5行目でmodal-lgを指定しています。
23行目でmodal-smを指定しています。

モーダルにデータを渡す

デモ

ソース

html

<!-- データ引渡し -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-data" data-name="山田">modal 山田</button>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-data" data-name="佐藤">modal 佐藤</button>

<div class="modal fade" id="myModal-data" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">タイトル</h4>
            </div>
            <div class="modal-body">
                モーダルテストです。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

javascript

$('#myModal-data').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('name');
    var modal = $(this);
    modal.find('.modal-title').text(recipient);
});

解説

html
2,3行目で独自データ属性(data-name)にモーダルに渡すデータを記述してます。

javascript
1行目のshow.bs.modalは、モーダルが表示される前のイベントです。

3行目でボタン要素に設定されていた独自データ属性(data-name)の値を取得してます。

モーダルからデータを受け取る

デモ

ソース

html

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-data2">modal</button>

<div class="modal fade" id="myModal-data2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">タイトル</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="exampleInput1">入力フィールド1</label>
                        <input type="text" class="form-control" id="exampleInput1" placeholder="数値を入力してください">
                    </div>
                    <div class="form-group">
                        <label for="exampleInput2">入力フィールド2</label>
                        <input type="text" class="form-control" id="exampleInput2" placeholder="数値を入力してください">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modal-save" data-dismiss="modal">更新</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-result"></div>

javascript

$("#modal-save").click(function () {
    var input1 = $("#exampleInput1").val();
    var input2 = $("#exampleInput2").val();

    if (!$.isNumeric(input1) || !$.isNumeric(input2)) {
        alert("数値を入力してください");
        return false;
    }

    var sum = parseInt(input1) + parseInt(input2);
    $("#modal-result").html("<p>足すと " + sum + "になります。</p>");
});

解説

javascript
更新ボタンのIDに対して、clickイベントを設定しています。

5~8行目で、数値が入力されていない場合、モーダルを閉じないようにしています。

イベント

デモ

ソース

html

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-event">modal</button>

<div class="modal fade" id="myModal-event" tabindex="-1" role="dialog">
    <!-- 省略 -->
</div>

javascript

$('#myModal-event').on('show.bs.modal', function (e) {
    alert("イベント発生: show.bs.modal ");
});
$('#myModal-event').on('shown.bs.modal', function (e) {
    alert("イベント発生: shown.bs.modal ");
});
$('#myModal-event').on('hide.bs.modal', function (e) {
    alert("イベント発生: hide.bs.modal ");
});

$('#myModal-event').on('hidden.bs.modal', function (e) {
    alert("イベント発生: hidden.bs.modal ");
});

解説

javascript
1行目 モーダルが表示される前のイベントです。
4行目 モーダルが表示された後のイベントです。
7行目 モーダルが閉じられる前のイベントです。
11行目 モーダルが閉じられた後のイベントです。

スポンサーリンク