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 nhauGiả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ứcVấ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ệtNế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;
}
7Mộ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
2Và đ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
3Và 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
4hoạ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
22Thậ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àoNế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
7Nó 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
8hoặc
.. other content
.. modal dialog here
0bạ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
1Bằ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 độngtố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
4Kiể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?
Thêm tùy chọn data-backdrop="false" làm thuộc tính cho nút mở phương thức . Lưu câu trả lời này.
Làm cách nào để sử dụng phông nền trong phương thức Bootstrap?
You could use this : ....
Làm cách nào để ngăn chế độ Bootstrap 5 đóng khi nhấp vào bên ngoài?
Phông nền tĩnh
.
Chủ Đề