Không cho phép cửa sổ chế độ Twitter Bootstrap đóng

Tôi đang tạo một cửa sổ phương thức bằng Twitter Bootstrap. Hành vi mặc định là nếu bạn nhấp bên ngoài khu vực phương thức, phương thức sẽ tự động đóng lại. Tôi muốn vô hiệu hóa điều đó - tức là không đóng cửa sổ phương thức khi nhấp bên ngoài phương thức.

Ai đó có thể chia sẻ mã jQuery để làm điều này?

Tôi tin rằng bạn muốn đặt giá trị nền thành tĩnh . Nếu bạn muốn tránh cửa sổ đóng khi sử dụng Escphím, bạn phải đặt giá trị khác.

Thí dụ:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

HOẶC nếu bạn đang sử dụng JavaScript:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});

Chỉ cần đặt backdroptài sản để 'static'.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

Bạn cũng có thể muốn đặt thuộc keyboardtính thành falsevì điều đó ngăn chế độ bị đóng bằng cách nhấn Escphím trên bàn phím.

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

myModal là ID của div chứa nội dung phương thức của bạn.

Bạn cũng có thể bao gồm các thuộc tính này trong chính định nghĩa phương thức:

<div class="modal hide fade" data-keyboard="false" data-backdrop="static">

Nếu bạn đã khởi tạo cửa sổ phương thức, thì bạn có thể muốn đặt lại các tùy chọn $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})để đảm bảo nó sẽ áp dụng các tùy chọn mới.

Ghi đè sự kiện 'ẩn' của Bootstrap và dừng hành vi mặc định của nó (để loại bỏ hộp thoại).

Vui lòng xem đoạn mã dưới đây:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

Nó hoạt động tốt trong trường hợp của chúng tôi.

Vâng, bạn có thể làm điều đó như thế này:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Kiểu như câu trả lời của @ AymKdn, nhưng điều này sẽ cho phép bạn thay đổi các tùy chọn mà không cần khởi tạo lại phương thức.

$('#myModal').data('modal').options.keyboard = false;

Hoặc nếu bạn cần thực hiện nhiều tùy chọn, JavaScript sẽ withcó ích ở đây!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

Nếu phương thức đã được mở, các tùy chọn này sẽ chỉ có hiệu lực vào lần tiếp theo phương thức được mở.

Chỉ cần thêm hai điều này

data-backdrop="static" 
data-keyboard="false"

Nó sẽ trông như thế này bây giờ

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Nó sẽ vô hiệu hóa nút thoát và cũng nhấp vào bất cứ đâu và ẩn.

Bạn có thể vô hiệu hóa hành vi nhấp để đóng của nền và biến nó thành mặc định cho tất cả các phương thức của bạn bằng cách thêm JavaScript này vào trang của bạn (đảm bảo nó được thực thi sau khi tải jQuery và Bootstrap):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

Như D3VELOPER nói, đoạn mã sau giải quyết nó:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

Tôi đang sử dụng cả jquery & bootstrap và đơn giản là removeData('modal')không hoạt động.

Điều tốt nhất tôi tìm thấy là thêm mã này vào liên kết

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

Trong trường hợp bất kỳ ai đến đây từ Google đang cố gắng tìm ra cách ngăn ai đó đóng một phương thức, đừng quên rằng cũng có một nút đóng ở phía trên bên phải của phương thức cần được gỡ bỏ.

Tôi đã sử dụng một số CSS để ẩn nó:

#Modal .modal-header button.close {
    visibility: hidden;
}

Lưu ý rằng sử dụng "display: none;" bị ghi đè khi phương thức được tạo, vì vậy đừng sử dụng nó.

Nếu bạn muốn vô hiệu hóa backdrop click closingtính năng này. Bạn có thể sử dụng dòng sau để đặt backdroptùy chọn statictrong thời gian chạy.

Bootstrap v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

Điều này sẽ ngăn một mô hình đã được khởi tạo với backdroptùy chọn được đặt thành false( hành vi mặc định ), đóng lại.

Bạn có thể đặt hành vi mặc định của cửa sổ bật lên phương thức bằng cách sử dụng dòng mã bên dưới:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

Làm điều đó là rất dễ dàng ngày nay. Chỉ cần thêm:

data-backdrop="static" data-keyboard="false" 

Trong bộ chia phương thức của bạn.

Chà, đây là một giải pháp khác mà một số bạn có thể đang tìm kiếm (như tôi đã ..)

Vấn đề của tôi cũng tương tự, hộp modal đã đóng trong khi iframe tôi có bên trong đang tải, vì vậy tôi phải vô hiệu hóa loại bỏ modal cho đến khi Iframe kết thúc tải, sau đó kích hoạt lại.

Các giải pháp được trình bày ở đây không hoạt động 100%.

Giải pháp của tôi là thế này:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

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

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

Vì vậy, tôi tạm thời ngăn Modal đóng lại với:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

Nhưng đó là var is_loading sẽ cho phép đóng lại sau khi Iframe được tải.

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

Để cập nhật trạng thái nền trong Bootstrap 4.1.3 sau khi phương thức được Hiển thị, chúng tôi đã sử dụng dòng sau từ plugin Bootstrap-Modal-Wrapper . Plugin tham khảo mã kho lưu trữ .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");