Phương thức Bootstrap nhấp chuột bên ngoài vô hiệu hóa

Question

Phông nền hoặc vùng tối sẽ đóng lại và biến mất khi chúng ta nhấp chuột ra bên ngoài cửa sổ Bootstrap Modal
Nếu không, nó sẽ biến mất khi chúng ta nhấn phím thoát bên trong phương thức
Nhưng chúng tôi muốn ngăn điều này xảy ra bằng cách sử dụng phương thức sau





Disallow the Bootstrap Modal from Closing - Wikitechy







    
    
    
    
    
        

            

                

                    ×
                    
Confirmation
                
                
                    
Do you want to save changes you made to document before closing?
                    If you don't save, your changes will be lost.
                
                
                    Close
                    Save changes

Sao chép mã

Trong mô hình này, chúng tôi sử dụng các tùy chọn sau để hiển thị khu vực phông nền khi chúng tôi nhấp vào bên ngoài

tùy chọn


  

    

      

        
Modal title
        
          ×
        
      
      
        
Modal body text goes here.
      
      
        Close
        Save changes

5 thành


  

    

      

        
Modal title
        
          ×
        
      
      
        
Modal body text goes here.
      
      
        Close
        Save changes

6 và

Tùy chọn


  

    

      

        
Modal title
        
          ×
        
      
      
        
Modal body text goes here.
      
      
        Close
        Save changes

7 thành


  

    

      

        
Modal title
        
          ×
        
      
      
        
Modal body text goes here.
      
      
        Close
        Save changes

8

Kiểm tra bản demo sau để ngăn đóng chế độ bootstrap khi chúng tôi nhấp vào bên ngoài mô hình hoặc nhấn nút Esc

Nếu bạn thích bài đăng này, vui lòng hỗ trợ blog bên dưới. Nó miễn phí

Nhận Asp mới nhất. mạng, C#. mạng, VB. NET, jQuery, Plugin & Đoạn mã MIỄN PHÍ bằng cách đăng ký nguồn cấp dữ liệu Facebook, Twitter, RSS hoặc qua email của chúng tôi

Sử dụng plugin phương thức JavaScript của Bootstrap để thêm hộp thoại vào trang web của bạn cho hộp đèn, thông báo người dùng hoặc nội dung hoàn toàn tùy chỉnh

Làm thế nào nó hoạt động

Trước khi bắt đầu với thành phần phương thức của Bootstrap, hãy nhớ đọc phần sau vì các tùy chọn menu của chúng tôi đã thay đổi gần đây

Các phương thức được xây dựng bằng HTML, CSS và JavaScript. Chúng được định vị trên mọi thứ khác trong tài liệu và xóa cuộn khỏi để thay vào đó, nội dung phương thức sẽ cuộn
Nhấp vào "phông nền" của phương thức sẽ tự động đóng phương thức
Bootstrap chỉ hỗ trợ một cửa sổ phương thức tại một thời điểm. Các phương thức lồng nhau không được hỗ trợ vì chúng tôi tin rằng chúng mang lại trải nghiệm người dùng kém

Các phương thức sử dụng



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

1, đôi khi có thể hơi cụ thể về cách hiển thị của nó. Bất cứ khi nào có thể, hãy đặt HTML phương thức của bạn ở vị trí cấp cao nhất để tránh khả năng can thiệp từ các phần tử khác. Bạn có thể gặp sự cố khi lồng một



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

2 trong một phần tử cố định khác

Một lần nữa, do



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

1, có một số lưu ý khi sử dụng phương thức trên thiết bị di động. để biết chi tiết

Do cách HTML5 xác định ngữ nghĩa của nó, không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Tiếp tục đọc các bản demo và hướng dẫn sử dụng

ví dụ

thành phần phương thức

Dưới đây là một ví dụ về phương thức tĩnh (có nghĩa là



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

5 và



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

6 của nó đã bị ghi đè). Bao gồm tiêu đề phương thức, nội dung phương thức (bắt buộc đối với



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

7) và chân trang phương thức (tùy chọn). Chúng tôi yêu cầu bạn bao gồm các tiêu đề phương thức với các hành động loại bỏ bất cứ khi nào có thể hoặc cung cấp một hành động loại bỏ rõ ràng khác

Văn bản nội dung phương thức ở đây

________số 8

Bản thử trực tiếp

Chuyển đổi bản trình diễn phương thức đang hoạt động bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang

Tuyệt vời, bạn đang đọc văn bản này trong một phương thức



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

phông nền tĩnh

Khi phông nền được đặt thành tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài phông nền. Nhấp vào nút bên dưới để dùng thử

Tôi sẽ không đóng nếu bạn nhấp vào bên ngoài tôi. Thậm chí đừng cố nhấn phím thoát

Khởi chạy phương thức phông nền tĩnh



  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      
        ...
      
      
        Close
        Save changes

0

Khi các phương thức trở nên quá dài đối với chế độ xem hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang đó. Hãy thử bản demo bên dưới để xem chúng tôi muốn nói gì

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla