0

Bootstrap (バージョン 2.3.1) を使用しており、Ajax を使用してモーダル ウィンドウに読み込みます。モーダル ウィンドウを閉じるときに、モーダル ウィンドウを DOM から削除する方法はありますか?

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');

        if (url.indexOf('#') == 0) {
         $(url).modal('open');
        } else {
            $.get(url, function(data) {
                $(data).modal();
            }).success(function() {
                console.log('success');

                // I tried this below but didn't work
                // $('#modalClose).on('click',function(){
                //    $('#myModalWindow').remove();
                // });
            });
        }
    });

私のボタン：

<a href="path/to/modal.html" data-target="#" data-toggle="modal">Launch modal</a>

私のモーダル ウィンドウには、閉じるボタンがあります。

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

ただし、モーダルを閉じると、html はまだ DOM にあり、モーダルを再度ロードすると、HTML が再び出力されます。モーダル ウィンドウを閉じるときに、モーダル ウィンドウを DOM から削除する方法はありますか?

4

2 に答える 2

1

Bootstrap モーダルに関連付けられた追加の css クラスを削除する必要があります。

これを成功させてみてください：

$('body').on('click', '#btn-close-modal', function () {
    $('#my-modal').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
});

btn-close-modalモーダルを削除するために使用するボタンはどこにありmy-modal、問題のモーダルの名前です。

于 2013-04-24T18:55:16.763 に答える
0

Should be pretty straightforward using .remove():

<button id="ModalClose" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

$('#ModalClose').on('click',function(){
    $('#IdOfModal').remove();
});

This should remove the full modal HTML from the DOM. Just note I gave the close button an id, and use that id as click reference.

If your modal (and therefore close button) is loaded through AJAX, then the dynamically-loaded elements will only be able to have any Javascript/jQuery work with them if applied in a callback function for that modal's load.

于 2013-04-24T16:09:48.380 に答える