Tôi đã sử dụng cửa sổ phương thức để triển khai trình hướng dẫn có khoảng 4,5 bước. Tôi cần hủy nó hoàn toàn sau bước cuối cùng (onFinish) và bước OnCancel mà không cần làm mới trang . Tất nhiên tôi có thể ẩn nó, nhưng ẩn cửa sổ phương thức sẽ khôi phục mọi thứ như vậy khi tôi mở lại. Bất cứ ai có thể giúp tôi về vấn đề này?

Cảm ơn Mọi câu trả lời gợi ý đều hữu ích cho tôi.

nếu là bootstrap 3, bạn có thể sử dụng:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

LƯU Ý: Giải pháp này chỉ hoạt động cho Bootstrap trước phiên bản 3. Để có câu trả lời cho Bootstrap 3, hãy tham khảo câu trả lời này của người dùng2612497 .

Những gì bạn muốn làm là:

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

điều đó sẽ khiến phương thức tự khởi tạo mỗi khi nó được hiển thị. Vì vậy, nếu bạn đang sử dụng nội dung từ xa để tải vào div hoặc bất cứ thứ gì, nó sẽ thực hiện lại mỗi khi được mở. Bạn chỉ đang phá hủy thể hiện phương thức sau mỗi lần nó bị ẩn.

Hoặc bất cứ khi nào bạn muốn kích hoạt việc hủy phần tử (trong trường hợp không thực sự là mỗi lần bạn ẩn nó), bạn chỉ cần gọi dòng giữa:

$('#modalElement').data('modal', null);

Twitter bootstrap tìm kiếm cá thể của nó nằm trong thuộc tính dữ liệu, nếu một cá thể tồn tại, nó chỉ cần chuyển đổi nó, nếu một cá thể không tồn tại, nó sẽ tạo một cá thể mới.

Hy vọng rằng sẽ giúp.

Đối với phiên bản 3.x

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

Đối với phiên bản 2.x (rủi ro; đọc nhận xét bên dưới) Khi bạn tạo phương thức bootstrap, ba phần tử trên trang của bạn bị thay đổi. Vì vậy, nếu bạn muốn khôi phục hoàn toàn tất cả các thay đổi, bạn phải thực hiện thủ công cho từng thay đổi.

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

Bạn hoàn toàn có thể phá hủy một phương thức mà không cần tải lại trang bằng cách này.

$("#modal").remove();
$('.modal-backdrop').remove();

nhưng nó sẽ loại bỏ hoàn toàn modal khỏi trang html của bạn. Sau khi phương thức ẩn hiện sẽ không hoạt động.

Tôi đã thử câu trả lời được chấp nhận nhưng dường như nó không hoạt động theo hướng của tôi và tôi không biết câu trả lời được chấp nhận sẽ hoạt động như thế nào.

$('#modalId').on('hidden.bs.modal', function () {
  $(this).remove();
})

Điều này đang hoạt động hoàn toàn tốt về phía tôi. Phiên bản BS> 3

Sức mạnh của jQuery. $(selector).modal('hide').destroy();trước tiên sẽ loại bỏ sinds mà bạn có thể có tác động trượt và sau đó xóa hoàn toàn phần tử, tuy nhiên nếu bạn muốn người dùng có thể mở lại phương thức sau khi bạn hoàn thành các bước. bạn có thể chỉ muốn cập nhật các cài đặt mà bạn muốn đặt lại để gửi lại tất cả các đầu vào trong phương thức của bạn, điều này sẽ giống như sau:

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

Theo những gì tôi hiểu, bạn không muốn xóa nó hay ẩn nó đi? Bởi vì bạn có thể muốn sử dụng lại nó sau này .. nhưng không muốn nó có nội dung cũ nếu bạn mở lại nó?

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Nếu bạn muốn sử dụng nó như một mẫu động, chỉ cần làm điều gì đó như

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

Nếu bạn có iframe trong phương thức của mình, bạn có thể xóa nội dung của nó bằng mã sau:

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

Cách tiếp cận của tôi là sử dụng clone()phương thức của jQuery. Nó tạo ra một bản sao của phần tử của bạn và đó là những gì bạn muốn: một bản sao của phương thức không thay đổi đầu tiên của bạn, mà bạn có thể thay thế theo ý muốn của mình: Demo (jsfiddle)

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

Đánh dấu tôi đã sử dụng là cơ bản nhất, vì vậy bạn chỉ cần liên kết trên các phần tử / sự kiện phù hợp và bạn sẽ đặt lại trình hướng dẫn của mình.

Hãy cẩn thận liên kết với các sự kiện được ủy quyền hoặc rebind ở mỗi lần đặt lại các phần tử bên trong của phương thức của bạn để mỗi phương thức mới hoạt động theo cùng một cách.

Đây là giải pháp của tôi:

this.$el.modal().off();

Tôi đã có một tình huống tương tự, nơi tôi sẽ mở một phương thức mới chỉ bằng một lần bấm nút. Sau khi hoàn tất, tôi muốn xóa hoàn toàn nó khỏi trang của mình ... Tôi sử dụng remove để xóa phương thức .. Khi nhấp vào nút, tôi sẽ kiểm tra xem phương thức có tồn tại không và nếu đúng, tôi sẽ hủy nó và tạo một phương thức mới ..

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3

Điều này loại bỏ hoàn toàn phương thức khỏi DOM, cũng đang hoạt động cho các phương thức "được thêm vào".

#pickoptionmodal là id của cửa sổ phương thức của tôi.

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

Tôi phải phá hủy phương thức ngay sau khi nó được đóng lại thông qua một lần nhấp vào nút, và vì vậy tôi đã nghĩ ra những điều sau.

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

Lưu ý rằng điều này hoạt động với Bootstrap 3.

Cũng hoạt động trên bootstrap 4.x

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

Nếu bóng của phương thức vẫn tối hơn và không hiển thị nhiều hơn một phương thức thì điều này sẽ hữu ích

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

Tôi đã phải sử dụng cùng một phương thức cho các lần nhấp vào liên kết khác nhau. Tôi vừa thay thế nội dung html bằng trống "" của phương thức trong lệnh gọi lại ẩn.

Điều này đã làm việc cho tôi.

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

Hộp thoại và phông nền đã biến mất, nhưng chúng trở lại vào lần sau khi tôi nhấp vào nút.

Nó hoạt động cho Bootstrap v3.3.6

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});

chỉ điều này làm việc cho tôi

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

Thật an toàn khi buộc các bộ chọn để trống vì phiên bản bootstrap và jquery có thể là lý do của sự cố này

Loại bỏ hoàn toàn một dòng khi ẩn (ES6)

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

Với ui-router, đây có thể là một lựa chọn cho bạn. Nó tải lại bộ điều khiển khi đóng để khởi động lại nội dung phương thức trước khi kích hoạt lần sau.

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

Tôi không biết điều này nghe có vẻ như thế nào nhưng điều này phù hợp với tôi ...........

$("#YourModalID").modal('hide');