Twitter bootstrap modal-backdrop không biến mất

Tôi đang sử dụng hộp thoại Modal bootstrap của Twitter. Khi tôi nhấp vào nút gửi của hộp thoại phương thức bootstrap, nó sẽ gửi một yêu cầu AJAX. Vấn đề của tôi là bối cảnh phương thức không biến mất. Hộp thoại Modal biến mất một cách chính xác, nhưng thay vào đó, "modal-backdrop in" tạo ra độ mờ trên màn hình

Tôi có thể làm gì?

Đảm bảo bạn không thay thế vùng chứa có cửa sổ phương thức thực tế khi bạn thực hiện yêu cầu AJAX, vì Bootstrap sẽ không thể tìm thấy một tham chiếu đến nó khi bạn cố gắng đóng nó. Trong trình xử lý hoàn chỉnh Ajax của bạn loại bỏ phương thức và sau đó thay thế dữ liệu.

Nếu điều đó không hiệu quả, bạn luôn có thể buộc nó biến mất bằng cách làm như sau:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Đảm bảo rằng cuộc gọi ban đầu của bạn $.modal()để áp dụng hành vi phương thức không chuyển qua nhiều yếu tố hơn bạn dự định. Nếu điều này xảy ra, cuối cùng nó sẽ tạo ra một thể hiện phương thức, hoàn thành với phần tử backdrop, cho phần tử EACH trong bộ sưu tập. Do đó, nó có thể trông giống như phông nền đã bị bỏ lại phía sau, khi thực sự bạn đang nhìn vào một trong những bản sao.

Trong trường hợp của tôi, tôi đã cố gắng tạo nội dung phương thức một cách nhanh chóng với một số mã như thế này:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Ở đây, nhận xét HTML sau </div>thẻ đóng có nghĩa là myModal thực sự là một bộ sưu tập jQuery gồm hai phần tử - div và nhận xét. Cả hai đều được biến thành các phương thức, mỗi cái đều có yếu tố bối cảnh riêng. Tất nhiên, phương thức đưa ra từ nhận xét là vô hình ngoài phông nền, vì vậy khi tôi đóng phương thức thực (div), nó trông giống như nền bị bỏ lại phía sau.

Tôi chỉ dành quá nhiều thời gian cho vấn đề này :)

Mặc dù các câu trả lời khác được cung cấp là hữu ích và hợp lệ, nhưng có vẻ hơi lộn xộn đối với tôi để tái tạo hiệu quả chức năng ẩn phương thức từ Bootstrap, vì vậy tôi đã tìm thấy một giải pháp sạch hơn.

Vấn đề là có một chuỗi các sự kiện xảy ra khi bạn gọi

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Sau đó, khi bạn thay thế một loạt HTML là kết quả của yêu cầu AJAX, các sự kiện ẩn phương thức sẽ không kết thúc. Tuy nhiên, Bootstrap kích hoạt một sự kiện khi mọi thứ kết thúc và bạn có thể nối vào đó như sau:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Hy vọng điều này là hữu ích!

Chèn vào nút hành động của bạn này:

data-backdrop="false"

và

data-dismiss="modal" 

thí dụ:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

nếu bạn nhập dữ liệu này, thì .modal-backdrop sẽ không xuất hiện. tài liệu về nó tại liên kết này: http://getbootstrap.com/javascript/#modals-usage

Nếu bạn đang sử dụng một bản sao và dán từ chính trang getboostrap vào bộ chọn được tạo bằng html, hãy đảm bảo bạn xóa nhận xét '<! - /.modal ->'. Bootstrap bị nhầm lẫn và nghĩ rằng nhận xét là một yếu tố phương thức thứ hai. Nó tạo ra một thả lại cho phần tử "thứ hai" này.

Tôi biết đây là một bài viết rất cũ nhưng điều này có thể giúp đỡ. Đây là một cách giải quyết rất nhỏ của tôi

$('#myModal').trigger('click');

Đó là, điều này sẽ giải quyết vấn đề

Tôi gặp phải một vấn đề tương tự: trong cửa sổ phương thức của tôi, tôi có hai nút, "Hủy" và "OK". Ban đầu, cả hai nút sẽ đóng cửa sổ phương thức bằng cách gọi $('#myModal').modal('hide')(với "OK" trước đó thực thi một số mã) và kịch bản sẽ như sau:

1. Mở cửa sổ phương thức
2. Thực hiện một số thao tác, sau đó nhấp vào "OK" để xác thực chúng và đóng phương thức
3. Mở lại phương thức và loại bỏ bằng cách nhấp vào "Hủy"
4. Mở lại phương thức, nhấp lại vào "Hủy" ==> phông nền không còn truy cập được nữa!

tốt, bàn tiếp theo của tôi đã lưu ngày của tôi: thay vì gọi $('#myModal').modal('hide'), hãy đặt các nút của bạn thuộc tính data-dismiss="modal"và thêm một sự kiện "nhấp chuột" vào nút "Gửi" của bạn. Trong vấn đề của tôi, mã HTML (tốt, TWIG) cho nút là:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

và trong mã JavaScript của tôi, tôi có:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

trong khi không có sự kiện "nhấp chuột" nào được quy cho nút "Hủy". Phương thức bây giờ đóng lại đúng cách và cho phép tôi chơi lại với trang "bình thường". Thực tế có vẻ như là data-dismiss="modal"cách duy nhất để chỉ ra rằng một nút (hoặc bất kỳ phần tử DOM nào) sẽ đóng một phương thức Bootstrap. Các .modal('hide')phương pháp dường như cư xử một cách không hoàn toàn kiểm soát được.

Hi vọng điêu nay co ich!

Vấn đề này cũng có thể xảy ra nếu bạn ẩn và sau đó hiển thị lại cửa sổ phương thức quá nhanh. Điều này đã được đề cập ở nơi khác để hỏi, nhưng tôi sẽ cung cấp thêm một số chi tiết dưới đây.

Vấn đề phải làm với thời gian, và quá trình chuyển đổi mờ dần. Nếu bạn hiển thị một phương thức trước khi quá trình chuyển đổi mờ dần cho phương thức trước đó hoàn tất, bạn sẽ thấy vấn đề bối cảnh dai dẳng này (bối cảnh phương thức sẽ ở trên màn hình, theo cách của bạn). Bootstrap rõ ràng không hỗ trợ nhiều phương thức đồng thời, nhưng đây dường như là một vấn đề ngay cả khi phương thức bạn đang ẩn và phương thức bạn đang hiển thị giống nhau.

Nếu đây là lý do chính xác cho vấn đề của bạn, đây là một số tùy chọn để giảm thiểu vấn đề. Tùy chọn # 1 là một thử nghiệm nhanh chóng và dễ dàng để xác định xem thời gian chuyển tiếp mờ dần có thực sự là nguyên nhân gây ra sự cố của bạn hay không.

1. Vô hiệu hóa hoạt hình Fade cho phương thức (loại bỏ lớp "fade" khỏi hộp thoại)
2. Cập nhật văn bản của phương thức thay vì ẩn và hiển thị lại.
3. Khắc phục thời gian để nó không hiển thị phương thức cho đến khi hoàn thành việc ẩn phương thức trước đó. Sử dụng các sự kiện của phương thức để làm điều này. http://getbootstrap.com/javascript/#modals-events

Dưới đây là một số bài viết theo dõi vấn đề bootstrap liên quan. Có thể có nhiều bài đăng theo dõi hơn tôi đã liệt kê dưới đây.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ('ẩn')

Thủ công giấu một phương thức. Trả về cho người gọi trước khi phương thức thực sự bị ẩn (tức là trước khi sự kiện hidden.bs.modal xảy ra).

Vì vậy, thay vì

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

làm

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Vì vậy, bạn chắc chắn chờ đợi cho đến khi sự kiện "ẩn" kết thúc.

Một sai lầm khác có thể gây ra vấn đề này,

Hãy chắc chắn rằng bạn không bao gồm bootstrap.jstập lệnh nhiều lần trong trang của mình!

Ngay cả khi tôi gặp phải một vấn đề tương tự, tôi có hai nút sau

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Tôi muốn thực hiện một số thao tác ajax và thành công của hoạt động ajax đó đóng chế độ. Vì vậy, đây là những gì tôi đã làm.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Tôi đã kích hoạt sự kiện nhấp chuột của nút 'Không' có thuộc data-dismiss="modal"tính. Và điều này đã làm việc :)

sử dụng:

$('.modal.in').modal('hide') 

Nguồn

Giải pháp này dành cho Ruby on Rails 3.x và tệp js.erb xây dựng lại một phần của DOM bao gồm cả phương thức. Nó hoạt động bất kể cuộc gọi ajax đến từ phương thức hoặc từ một phần khác của trang.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Cảm ơn @BillHuertas cho điểm khởi đầu.

$ ('# myModal'). kích hoạt ('nhấp');

Điều này làm việc cho tôi. Nó không đóng bởi vì khi bạn mở cửa sổ bật lên, nó sẽ kích hoạt 2 hoặc 3 phông nền phương thức. Vì vậy, khi bạn làm $ ('# myModal')). Modal ('ẩn'); nó chỉ có tác dụng một chế độ nền và phần còn lại.

vấn đề cập nhật.

Vấn đề của tôi là do vị trí updatepanel. Tôi đã có toàn bộ phương thức trong updatepanel. Nếu bạn khai báo phương thức bên ngoài updatepanel và chỉ cần nói, phần thân phương thức, trong bảng cập nhật, sau đó là $ ('# myModalID'). Modal ('ẩn'); đã làm việc.

Một quan điểm khác cho câu hỏi này. (Tôi đang sử dụng phiên bản bootstrap.js 3.3.6)

Tôi đã nhầm khởi tạo phương thức cả hai bằng cách thủ công trong javascript:

$('#myModal').modal({
   keyboard: false
})

và bằng cách sử dụng

data-toggle="modal"

trong nút này như ví dụ dưới đây (hiển thị trong tài liệu)

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

vì vậy kết quả tạo ra hai thể hiện của

<div class="modal-backdrop fade in"></div>

nối vào phần thân html của tôi khi mở phương thức. Đây có thể là nguyên nhân khi đóng chế độ bằng cách sử dụng chức năng:

$('#myModal').modal('hide');

nó chỉ xóa một trường hợp nền (như hiển thị ở trên) để phông nền sẽ không biến mất. Nhưng nó đã biến mất nếu bạn sử dụng data-dismiss="modal"add trên html như hiển thị trong tài liệu bootstrap.

Vì vậy, giải pháp cho vấn đề của tôi là chỉ khởi tạo phương thức thủ công trong javascript và không sử dụng thuộc tính dữ liệu, Bằng cách này tôi có thể đóng phương thức thủ công và bằng cách sử dụng data-dismiss="modal"các tính năng.

Hy vọng điều này sẽ giúp nếu bạn gặp phải vấn đề tương tự như tôi.

FYI trong trường hợp ai đó vẫn gặp phải vấn đề này ... Tôi đã dành khoảng 3 giờ để khám phá ra rằng cách tốt nhất để làm điều đó như sau:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Chức năng đó để đóng phương thức rất không trực quan.

Thêm data-dismiss="modal"vào bất kỳ nút nào trong phương thức của tôi làm việc cho tôi. Tôi muốn nút của mình gọi một hàm có góc để thực hiện cuộc gọi ajax VÀ đóng phương thức để tôi thêm một .toggle()hàm trong hàm và nó hoạt động tốt. (Trong trường hợp của tôi, tôi đã sử dụng một bootstrap modalvà sử dụng một số angular, không phải là bộ điều khiển phương thức thực tế).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

Tôi đã từng gặp vấn đề tương tự. Tôi phát hiện ra đó là do mâu thuẫn giữa Bootstrap và JQueryUI.

Cả hai đều sử dụng lớp "đóng". Thay đổi lớp trong một hoặc khác sửa lỗi này.

Sử dụng chuyển đổi thay vì ẩn, giải quyết vấn đề của tôi

Hãy chắc chắn rằng bạn không sử dụng cùng một Id / lớp phần tử ở nơi khác, cho một phần tử không liên quan đến thành phần phương thức.

Đó là .. nếu bạn đang xác định các nút kích hoạt cửa sổ bật lên phương thức bằng tên lớp 'myModal', hãy đảm bảo rằng không có phần tử không liên quan nào có cùng tên lớp.

Sau khi áp dụng giải pháp được xếp hạng hàng đầu, tôi gặp vấn đề là nó phá vỡ các phương thức trong tương lai. Tôi đã tìm thấy giải pháp của tôi hoạt động tốt

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Tôi đã có cùng một vấn đề khi cố gắng gửi biểu mẫu. Giải pháp là thay đổi loại nút từ submitsang buttonrồi xử lý sự kiện nhấn nút như sau:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Trong dự án .net MVC4, tôi đã có chế độ bật lên (bootstrap 3.0) bên trong Ajax.BeginForm (OnComplete = "addComplete" [đã xóa mã bổ sung]). Trong javascript "addComplete" tôi có đoạn mã sau. Điều này đã giải quyết vấn đề của tôi.

$ ('# moreLotDPModal'). hide ();

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

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

$ ('# moreLotDPModal'). removeClass ("in");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

Tôi đã có vấn đề rất giống nhau.

Tuy nhiên tôi đã sử dụng bootbox.js, vì vậy nó có thể là một cái gì đó để làm với điều đó.

Dù bằng cách nào, tôi nhận ra rằng vấn đề đã được gây ra bởi việc có một phần tử có cùng lớp với nó là cha mẹ. Khi một trong những yếu tố này được sử dụng để liên kết một chức năng nhấp để hiển thị phương thức, thì sự cố xảy ra.

tức là đây là nguyên nhân gây ra vấn đề:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

thay đổi nó để phần tử được nhấp vào không có cùng lớp với cha mẹ, bất kỳ đứa trẻ nào hoặc bất kỳ tổ tiên nào khác. Có lẽ thực tế tốt để làm điều này nói chung khi ràng buộc các chức năng nhấp chuột.

Tôi đang làm việc với Meteor và tôi cũng gặp vấn đề tương tự. Nguyên nhân gây ra lỗi của tôi là do:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Như bạn có thể thấy tôi đã thêm phương thức trong phần khác, vì vậy khi phương thức của tôi cập nhật thông tin liên lạc nếu có trạng thái khác. Điều này khiến cho mẫu phương thức bị loại khỏi DOM ngay trước khi nó đóng.

Giải pháp: di chuyển phương thức ra khỏi if-other:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

fiddle -> https://jsfiddle.net/o6th7t1x/4/

giá trị ban đầu của thuộc tính nền dữ liệu của bạn có thể là

"tĩnh", "đúng", "sai".

tĩnh và true thêm bóng modal, trong khi false vô hiệu hóa bóng, vì vậy bạn chỉ cần thay đổi giá trị này với lần nhấp đầu tiên thành false. như thế này:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Tôi đã có vấn đề đóng băng màn hình nền modal nhưng trong một kịch bản hơi khác: Khi 2 chế độ quay lại trở lại đang được hiển thị. ví dụ: Người đầu tiên sẽ yêu cầu xác nhận để làm gì đó và sau khi nhấp vào nút 'xác nhận', hành động sẽ gặp lỗi và phương thức thứ 2 sẽ được hiển thị để bật thông báo lỗi. Phông nền phương thức thứ 2 sẽ đóng băng màn hình. Không có xung đột trong tên lớp hoặc id của các phần tử.

Cách khắc phục sự cố là cung cấp cho trình duyệt đủ thời gian để xử lý bối cảnh phương thức. Thay vì thực hiện ngay hành động sau khi nhấp vào 'xác nhận', hãy cho trình duyệt nói 500ms để ẩn chế độ thứ nhất và dọn sạch phông nền, v.v. - sau đó thực hiện hành động sẽ hiển thị phương thức lỗi.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Hàm _dialogConfirmed () có đoạn mã sau:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Tôi đoán các giải pháp khác hoạt động được vì chúng mất đủ thời gian để cung cấp cho trình duyệt thời gian dọn dẹp cần thiết.

Trong ASP.NET, thêm một bản cập nhật cho UpdatePanel về mã phía sau sau lệnh jquery. Thí dụ:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();