Làm cách nào để làm cho nền phương thức Bootstrap không thể nhấp được?

Tôi đã nhiều lần gặp sự cố sau với hộp thoại phương thức của Bootstrap khi hộp thoại kết thúc hiển thị bên dưới nền phương thức

ừ. Vấn đề này dường như đã xảy ra vào khoảng Bootstrap 3. 33 - trước đó mọi thứ dường như hoạt động tốt nhưng bắt đầu với 3. 34 và sau đó mọi thứ bắt đầu đi về phía nam

Do vị trí gây ra

Vấn đề là nhiều ứng dụng hiện đại sử dụng định vị

    

        .. other content
    





    .. modal dialog here

5,

    

        .. other content
    





    .. modal dialog here

6 và

    

        .. other content
    





    .. modal dialog here

7 để bố trí giao diện người dùng của chúng. Sự cố trên xảy ra khi hộp thoại Phương thức nằm trong vùng chứa có bất kỳ cấp độ gốc nào sử dụng định vị

    

        .. other content
    





    .. modal dialog here

5,

    

        .. other content
    





    .. modal dialog here

6 hoặc

    

        .. other content
    





    .. modal dialog here

7. Bài thay đổi 3. Điểm 34 của bootstrap là lớp phủ phương thức đã được chuyển đến gốc DOM bên dưới

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

1 trong khi nội dung hộp thoại phương thức thực tế trong trường hợp này nằm bên trong cấu trúc DOM lồng nhau riêng biệt

    

        .. other content
        

            .. modal dialog here
        
    

Sự cố xảy ra do lớp phủ và vùng chứa nội dung khác không liên quan đến nhau nên giá trị chỉ mục z của

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

2 (hoặc cố định) không liên quan trực tiếp đến nhau

Giải pháp đơn giản nhất là di chuyển hộp thoại phương thức ra bên ngoài bất kỳ vùng chứa nào và chỉ cần khai báo nó dưới phần tử

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

1 hoặc - xóa mọi định vị tuyệt đối, cố định hoặc tương đối

    

        .. other content
    





    .. modal dialog here

Thiết lập này hoạt động vì không có vùng chứa cấp cao nhất phía trên phương thức giới thiệu gốc định vị của chính nó

Vấn đề được giải quyết, phải không?

Không quá nhanh

cũng không hẳn. Nếu bạn có thể di chuyển các phần tử của mình - thật tuyệt, nhưng trong các ứng dụng động được hiển thị thông qua một khung như Angular, có khả năng bạn có một thành phần hiển thị phương thức và bạn không thể kiểm soát vị trí của phần tử. Trong ví dụ đầu tiên, thẻ

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

4 là gốc DOM của ứng dụng Angular và mọi thứ được hiển thị động bởi Angular hiển thị bên dưới nó. Nếu bất cứ thứ gì trong cây đó sử dụng

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

5 hoặc

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

6 - thì vấn đề sẽ xuất hiện trong các phương thức

Vấn đề là lớp phủ

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

7 nằm trong thư mục gốc của cây DOM trong khi nội dung khác được chôn trong một cây nút DOM riêng biệt

Nếu bất cứ thứ gì bên trong cây đó được định vị tương đối, thì chỉ số z không còn có thể được so sánh một cách hiệu quả. Bạn có thể thử sử dụng cách sau (Bootstrap 4 - trong 3 sử dụng

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

8 thay vì

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

9

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

Điều này không hoạt động trong một số trường hợp nhưng không hoạt động trong các tình huống khác, vì vậy điều này có thể phụ thuộc vào bố cục ứng dụng của bạn. Chỉ cần đảm bảo rằng bạn sử dụng

    

        .. other content
    





    .. modal dialog here

80 và đảm bảo rằng

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

9 được đặt cao hơn

.modal-backdrop {
    z-index: 1040 !important;
}
.modal-content {
    margin: 2px auto;
    z-index: 1100 !important;
}

7

Một giải pháp thay thế về cơ bản là buộc phương thức ra khỏi thẻ body bằng tập lệnh. Vì dù sao thì tôi cũng kích hoạt phương thức trong mã, nên thật dễ dàng để thực hiện các thao tác sau

    

        .. other content
    





    .. modal dialog here

8

Điều này hoạt động - loại. Nhưng mà. điều này cũng có tác dụng phụ khó chịu. Vì Angular hiển thị lại chế độ xem mỗi khi nó được truy cập, nên một phần tử #EditModal mới được tạo mọi lúc. Sau một vài lần truy cập, các yếu tố 'đã di chuyển' bắt đầu chồng chất ở cuối trang

Không chỉ vậy - hành vi này còn gây ra sự trùng lặp của các phần tử và đôi khi khiến dữ liệu sai xuất hiện

Trong trường hợp của tôi, vì tôi đang sử dụng Angular 2. 0 và tôi kiểm soát mã, tôi có thể sửa lỗi này bằng cách xóa phương thức khi tôi thoát chế độ xem

    

        .. other content
    





    .. modal dialog here

2

Và điều này thực sự hiệu quả. Tôi nhận được phương thức bật lên và được di chuyển, và tôi có thể truy cập nó. Khi tôi rời khỏi chế độ xem, tham chiếu DOM không liên quan, đã di chuyển sẽ được dọn sạch

Điều này hoạt động trong tình trạng khó khăn nhưng rõ ràng đây không phải là một giải pháp chung chung

Xóa phông nền

Có rất nhiều giải pháp khác hoạt động xung quanh chủ đề cơ bản tương tự này, chuyển phương thức ra khỏi cây DOM đến gốc, nhưng tôi thấy tất cả chúng đều thiếu hoặc không hoạt động trong một số tình huống

Cách đáng tin cậy duy nhất để làm cho các phương thức hoạt động mà tôi tìm thấy để khắc phục toàn bộ mớ hỗn độn này là chỉ cần tắt hoàn toàn phông nền. Thêm CSS này vào biểu định kiểu chung của bạn

    

        .. other content
    





    .. modal dialog here

3

Và hộp thoại phương thức sẽ hoạt động, mặc dù không có lớp phủ màu đen

Mặc dù điều này không phải là lý tưởng, nhưng nó giải quyết vấn đề rõ ràng ở một nơi và cho tất cả các tình huống, vì vậy đây rõ ràng là giải pháp không rắc rối. Nền đen sẽ đẹp nhưng không phải nếu nó gây bất lợi cho việc ứng dụng hoạt động không chính xác

Bạn cũng có thể tắt nền theo từng trường hợp bằng cách sử dụng một thuộc tính trên hộp thoại phương thức

    

        .. other content
    





    .. modal dialog here

4

hoạt động nếu bạn có một nhóm hộp thoại hỗn hợp có thể được xác định trên toàn cầu và tĩnh ở gốc, cùng với các phương thức được nhúng và tạo ứng dụng

Tóm lược

Đây không phải là tin chính xác, nhưng sau nhiều lần gặp sự cố này, tôi quyết định viết nó ra để tôi có thể nhớ cách khắc phục nó vào lần tới khi nó xảy ra

Để tóm tắt

• Nếu có thể di chuyển Modal vào phần tử

  .modal-backdrop {
      z-index: 1040 !important;
  }
  .modal-content {
      margin: 2px auto;
      z-index: 1100 !important;
  }
  

  1
• Nếu có thể, không có yếu tố cố định, tuyệt đối hoặc tương đối nào ở trên vị trí của

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  84
• Nếu có thể, hãy sử dụng mã để di chuyển

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  84 sang thẻ

  .modal-backdrop {
      z-index: 1040 !important;
  }
  .modal-content {
      margin: 2px auto;
      z-index: 1100 !important;
  }
  

  1 và xóa hoặc di chuyển trở lại khi hoàn tất
• Ghi đè rõ ràng kiểu

  .modal-backdrop {
      z-index: 1040 !important;
  }
  .modal-content {
      margin: 2px auto;
      z-index: 1100 !important;
  }
  

  7 và

  .modal-backdrop {
      z-index: 1040 !important;
  }
  .modal-content {
      margin: 2px auto;
      z-index: 1100 !important;
  }
  

  9

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  89
• Nếu vẫn thất bại, hãy xóa nền trên

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  20 bằng thuộc tính

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  21 hoặc

  
  
  
      
  
          .. other content
      
  
  
  
  
  
      .. modal dialog here
  
  
  
  

  22

Thật điên rồ khi nghĩ rằng những người dùng Bootstrap đã quyết định không khắc phục sự cố phổ biến này

Số lượng câu trả lời và nhận xét về vấn đề StackOverflow này cũng như vấn đề GitHub là rất lớn, nhưng vấn đề này vẫn chưa được giải quyết trong hơn một năm rưỡi. Có một bản sửa lỗi được cho là (di chuyển lớp phủ vào cùng một cây DOM như phương thức) nhưng thử nghiệm điều đó bằng cách di chuyển nó một cách rõ ràng trong mã thậm chí còn tỏ ra kỳ lạ hơn với hành vi mờ đục kỳ lạ và các tạo tác kỳ lạ khác

Đối với cá nhân tôi, thủ thuật

    

        .. other content
    





    .. modal dialog here

23 là thứ tôi đã sử dụng vì nó chỉ hoạt động mà không có bất kỳ thay đổi nào

Nếu bất kỳ ai có thể nghĩ ra cách chúng tôi có thể làm cho nó hoạt động trong một khung ứng dụng động như Angular, hãy để lại nhận xét

Tài nguyên

• Một triệu câu hỏi và câu trả lời về chủ đề này trên StackOverflow
• Chủ đề trên BootStrap GitHub Repo
• Giả sử sửa lỗi (không tích hợp)

Các bài viết khác có thể bạn thích

• Sử dụng Bộ lọc CSS độ sáng () để đánh dấu chung Nội dung
• Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
• Tạo một HttpInterceptor tùy chỉnh để xử lý 'withCredentials' trong Angular 6+
• Sử dụng Máy chủ Web Tải lại Trực tiếp của Angular để Làm mới Trang trên Điện thoại

Chia sẻ

Nội dung này có hữu ích với bạn không?

Được đăng trong CSS  Angular

Tiếng nói của lý trí

---

 

Matt Cannon
Ngày 16 tháng 11 năm 2017

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Làm thế nào về việc di chuyển phương thức trên ngOnInit?

ngOnInit() { // Di chuyển phương thức bằng cách Nối nó vào phần thân nếu không nó sẽ xuất hiện phía sau bóng râm $('#EditModal'). appendTo('body') }

Matt Cannon
Ngày 16 tháng 11 năm 2017

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Làm thế nào về việc di chuyển phương thức trên ngOnInit? . Lần đầu tiên tôi chuyển nó vào phần thân sau đó nhận ra vấn đề của bạn là phải xóa các phần tử khi hủy. Vì vậy, tôi chỉ di chuyển chúng đến phần tử ngoài cùng, vì vậy không cần phải hủy

ngOnInit() { // Di chuyển phương thức bằng cách Nối nó vào phần thân nếu không nó sẽ xuất hiện phía sau bóng râm $('#EditModal'). appendTo('. Nội dung trang') }

Rick Strahl
Ngày 16 tháng 11 năm 2017

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

@Matt - có thể hoạt động trong một số trường hợp nhưng không phải lúc nào cũng vậy. Tôi đã thử nghiệm rất nhiều thứ khác nhau và thứ duy nhất hoạt động đáng tin cậy là không sử dụng nền và trì hoãn cập nhật thứ tự z (ngoài dải)

Adam
Ngày 10 tháng 1 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Tôi gặp vấn đề tương tự khi sử dụng hộp thoại bootstrap và điều này hiệu quả với tôi. Có phần thưởng bổ sung mà hộp thoại không đóng nếu bạn vô tình nhấp vào nền

Dejan
Ngày 14 tháng 2 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Tôi đã giải quyết nó như bạn đã nói và để mô phỏng phông nền đó, tôi chỉ cần thêm nền vào phương thức ở định dạng rgba

    

        .. other content
    





    .. modal dialog here

6

Glade Mellor
Ngày 29 tháng 3 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Tôi chỉ nhận xét ra vị trí. kiểu cố định trong _modal. tập tin css cho. modal-backdrop và điều đó dường như phù hợp với tôi

// Nền phương thức. modal-backdrop {/* nhận xét ra vị trí. đã sửa - sửa lỗi */ //vị trí. đã sửa; . 0; . 0; . 0; . 0; . $zindex-modal-backdrop; . $modal-backdrop-bg; . mờ dần { độ mờ. 0;

Cảm ơn đã hướng dẫn

SamRay1024
Ngày 12 tháng 4 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Tôi gặp vấn đề tương tự và tôi đã tìm thấy một giải pháp khác phù hợp với trường hợp sử dụng của mình. di chuyển. modal-backdrop div được chèn vào DOM bên dưới khi mở phương thức bên cạnh phương thức

    

        .. other content
    





    .. modal dialog here

7

Nó hoạt động tốt kể từ khi phương thức được đóng lại,. phông nền phương thức bị xóa

Adam J. Mendoza
25 tháng 5 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Cảm ơn. Tôi gặp lỗi này khi sử dụng gói Angular 6 và ng2-bs3-modal

Roshdy Kamel
Ngày 01 tháng 7 năm 2018

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Ý tưởng hay mà bạn đã có ở đó, nhưng tôi đã tìm thấy một ý tưởng dễ dàng hơn chỉ bằng css. Ghi chú. Nếu bạn loại bỏ phông nền

    

        .. other content
    





    .. modal dialog here

8

hoặc

    

        .. other content
    





    .. modal dialog here

0

bạn sẽ mất tùy chọn [bấm để ẩn]. Vì vậy, trong ngắn hạn, một giải pháp tốt sẽ là

    

        .. other content
    





    .. modal dialog here

1

Bằng cách này, bạn sẽ có nền tối, phương thức sẽ không ẩn sau phông nền và bạn vẫn có thể nhấp để ẩn

NGR
Ngày 19 tháng 2 năm 2019

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Cuối cùng tôi đã làm gì

    

        .. other content
    





    .. modal dialog here

2

Lloyd
Ngày 07 tháng 3 năm 2019

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Cám ơn vì cái này. Tôi đã tự hỏi làm thế quái nào để chẩn đoán vấn đề này khi chỉ số z không có tác dụng

Google nhanh chóng sản xuất cái này

Thomas Phaneuf
03 tháng 8 năm 2019

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

Làm cho nó hoạt động chỉ với chỉ mục z. . phương thức-bối cảnh { z-index. 9. quan trọng; . style="z-index. 10" Có vẻ như mọi số sẽ hoạt động miễn là chỉ số z của phông nền nhỏ hơn chỉ số z của phương thức

NicolaB
05 tháng 3 năm 2020

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

@Abdou, tốt nhưng. không đủ tốt. Nếu bạn sử dụng

    

        .. other content
    





    .. modal dialog here

24 thì nó không hoạt động

tốt hơn như vậy

    

        .. other content
    





    .. modal dialog here

3

Alexey
Ngày 14 tháng 4 năm 2020

lại. Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức

    

        .. other content
    





    .. modal dialog here

4

Kiểm tra cái này, hoạt động tốt trên tất cả các phương thức. Thêm tập lệnh ở cuối trang

https. // stackoverflow. com/câu hỏi/10415400/jquery-detecting-div-of-certain-class-has-been-add-to-dom

Làm cách nào để xóa phông nền phương thức Bootstrap?

Làm cách nào để sử dụng phông nền trong phương thức Bootstrap?