9

カスタム Bootstrap モーダルを挿入する必要がある場合に使用できるスクリプトが必要であると判断しました。空の静的な Bootstrap モーダル HTML が常に使用されるとは限らない場合、すべてのページの下部に配置したくありませんでした。

したがって、これは間違った方法かもしれませんが、これが私の試みでした。モーダル「シェル」html である変数を作成します。次に、デバイス項目をクリックすると、これが本文に追加されます。いくつかのコンテンツを複製して、モーダルのヘッダーと本文に追加しました。すべて正常に動作しています。しかし、一度閉じたモーダルを削除することはできません。これは、モーダル シェル HTML が HTML ページに静的に存在する場合、削除が正常に機能するため、JS を介して HTML を挿入するという事実と関係があります。

HTML:

<ul>
    <li class="span4 device">
        <div class="inner">
            <h3>Device 4</h3>
            <div class="device-product">
                <img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" />
                <a href="#" class="hide">Troubleshoot this item</a>
                <a href="#" class="hide">How to use this product</a>
            </div>
            <div class="device-details">
                <div class="control-group">
                    <label class="control-label">Device Type:</label>
                    <span class="field">Really cool device</span>
                </div>
                <!-- Small amount of hidden additional information -->
                <div class="control-group hide">
                    <label class="control-label">Device ID:</label>
                    <span class="field">123456</span>
                </div>
            </div>
        </div>
    </li>
</ul>

jQuery:

var customModal = $(
    '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \ 
        <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> \
        <div class="modal-body"></div> \
        <div class="modal-footer"><button class="btn" data-dismiss="modal">Close</button></div> \
    </div>'
);

$('.device').click(function(){
    $('body').append(customModal);
    $(this).find($('h3')).clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});

 $('.custom-modal').on('hidden', function(){
    $(this).remove();
});

だから本当に私が苦労しているのは remove() だけです。しかしまた、私が間違った/非効率的な方法でこれを行っているかどうかについてのコメントは、常に学習に役立ちます!

4

1 に答える 1

19

div が DOM に追加されるhidden前に、イベントのイベント ハンドラーをバインドしようとしているため、イベント ハンドラーは何にもバインドされません。.custom-modal

これには 2 つの方法があります。

  1. custom-modal のクラスを持つ任意の要素から発生するイベントhiddenをドキュメントが常にリッスンするように、イベント ハンドラーを委任します。hidden

    $(document).on('hidden', '.custom-modal', function () {
    $(this).remove();
});

  2. モーダル div を DOM に追加した後、イベント ハンドラーをバインドします。

    $('.device').click(function(){
    // Push the modal markup into the DOM
    $('body').append(customModal);

    // Now that it's in the DOM we can find it and bind an event handler
    $('.custom-modal').on('hidden', function () {
        $(this).remove();
    });

    // Continue with other init tasks
    $(this).find('h3').clone().appendTo('.custom-modal .modal-header');
    $(this).find('.device-product, .device-details').clone().appendTo('.custom-modal .modal-body');
    $('.custom-modal.hide').show();
    $('.custom-modal').modal();
});

特に複数のモーダルが開かれる可能性がある場合は、オプション 1 をお勧めします。

于 2013-05-14T01:25:29.970 に答える