Không cho phép đóng cửa sổ phương thức Twitter Bootstrap

555
user1296175 2012-03-28 07:10.

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 vào bên ngoài khu vực phương thức, phương thức sẽ tự động đóng. Tôi muốn tắt điều đó - tức là không đóng cửa sổ phương thức khi nhấp vào bên ngoài phương thức.

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

21 answers

698
Nobita 2012-03-28 07:18.

Tôi tin rằng bạn muốn đặt giá trị phông nền thành tĩnh . Nếu bạn muốn tránh đóng cửa sổ khi sử dụng Esckhóa, bạn phải đặt mộ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
});
311
Nirmal 2012-07-12 14:36.

Chỉ cần đặt thuộc backdroptính thành '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 phương thức 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.

215
Varun Chatterji 2013-01-09 17:34.

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">
46
AymKdn 2012-07-20 06:41.

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 với $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})để đảm bảo rằng nó sẽ áp dụng các tùy chọn mới.

35
Sam Jha 2014-08-07 01:54.

Ghi đè sự kiện Bootstrap 'hide' của Dialog và dừng hành vi mặc định của nó (để hủy 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.

33
Satish Singh 2015-01-02 07:54.

Có, bạn có thể làm như thế này:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">
22
CBarr 2013-04-26 12:10.

Giống 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 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 trong lần mở phương thức tiếp theo .

14
Vivek 2014-05-17 07:55.

Chỉ cần thêm hai thứ này

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

Nó sẽ giố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ả nhấp chuột vào bất kỳ đâu và ẩn.

11
Eric B 2014-10-01 10:05.

Bạn có thể vô hiệu hóa hành vi nhấp để đóng của nền và đặt điều này làm 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 jQuery và Bootstrap JS được tải):

$(function() { $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
6
Morgan RotaStabelli 2015-09-16 22:31.

Như D3VELOPER nói, 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à chỉ đơn giản là removeData('modal')không hoạt động.

4
user3634719 2014-05-16 06:52.

Điều tốt nhất tôi 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>
3
jfindley 2016-04-24 20:50.

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.

2
Drew 2014-05-03 05:27.

Trong trường hợp bất kỳ ai đến đây từ Google đang cố gắng tìm 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 ở trên cùng bên phải của phương thức cần được xóa.

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 điều đó.

2
Mohd Abdul Mujib 2016-11-19 05:30.

Nếu bạn muốn tắt backdrop click closingtính năng có điều kiện . 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.

2
haresh hanat 2017-02-16 22:11.

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ã dưới đây:

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
1
miguelmpn 2015-04-14 04:01.

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 phương thức đang đóng trong khi iframe mà tôi có bên trong đang tải, vì vậy tôi phải vô hiệu hóa loại bỏ phương thức cho đến khi iframe tải xong, sau đó bậ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à:

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 Phương thức đóng bằng:

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

Nhưng thứ i là var is_loading sẽ bật lại tính năng đóng sau khi Iframe được tải.

1
shiva krishna 2017-07-06 23:49.
<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>
0
mohamed sulibi 2018-09-05 09:04.

Để Cập nhật trạng thái phông 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 . Tham chiếu mã kho lưu trữ plugin .

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");
0
bharat 2020-07-19 02:26.

Hãy thử dòng chính với:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">
0
edmakalla 2020-09-20 03:07.
$(document).ready(function(e){ $("#modalId").modal({
     backdrop: 'static',
     keyboard: false,
     show: false
  });

});

"backdrop: 'static'" sẽ ngăn chặn phương thức đóng khi nhấp vào bên ngoài nó; "keyboard: false" chỉ định rằng phương thức có thể được đóng từ phím thoát (Esc) "show: false" sẽ ẩn phương thức khi trang tải xong

0
Cristiano Felipe 2020-10-29 04:38.

Giải pháp được trình bày như một câu trả lời không hoạt động, điều gì là sai?

$(document).ready(function(){ $('.modal').modal('show');
            $('.modal').modal({
              backdrop: 'static',
              keyboard: false
            })
        });
<html>
   <head>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
       <body>
       
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
              </div>
              <div class="modal-footer">
                <div class="text-right"><button type="button" class="btn btn-primary">print</button></div>
            </div>
            </div>
          </div>
        </div>
   </body>
</html>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language