12
Bootstrap sử dụng mất điện khi nó hiển thị hộp thoại phương thức. Làm cách nào tôi tạo hiệu ứng mờ trên toàn bộ nền?Làm thế nào để làm cho hộp thoại phương thức với nền mờ bằng cách sử dụng Twitter Bootstrap?
A
Trả lời
29
Trước tiên, bạn cần thay đổi cấu trúc của tài liệu. Nó sẽ giống như thế này
<body>
<div class="supreme-container">all your content goes here except for the modal</div>
<div id="myModal" class="modal fade">This is your modal.</div>
</body>
Và sau đó trong css
body.modal-open .supreme-container{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
4
Tôi nghĩ rằng cách dễ nhất để đạt được điều này là để áp dụng một lớp blur đến các yếu tố nền tảng sử dụng jQuery khi phương thức được mở. Di blur khi phương thức được đóng ...
.blur {
box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
transform: scale(0.9);
opacity: 0.6;
}
6
Nếu bạn đang sử dụng boostrap sau đó nội dung của bạn là đã có trong một số loại container. Vì vậy, điều này phù hợp với tôi mà không cần phải sửa đổi HTML hoặc bất kỳ JS bổ sung nào:
.modal-open .container-fluid, .modal-open .container {
-webkit-filter: blur(5px) grayscale(90%);
}
+0
đây là giải pháp tốt nhất. –
+0
Đây là một trong những hiệu ứng những gì tôi đang tìm kiếm! Cảm ơn người đàn ông! –
+0
Tôi đã thử điều này, nhưng không thực sự làm các trick (Tôi đang sử dụng React và React Bootstrap). Những gì tôi đã làm dựa trên câu trả lời của bạn và làm việc cho tôi: 'body.modal-open #root { -webkit-filter: làm mờ (5px) thang độ xám (90%); } ' –
Các vấn đề liên quan
- 1. Twitter Bootstrap: Cách đóng hộp thoại phương thức?
- 2. Twitter Bootstrap 2 phương thức dưới dạng các hộp thoại
- 3. Twitter Bootstrap - tại sao phương thức của tôi bị mờ đi làm nền?
- 4. Trong Twitter Bootstrap, làm cách nào để hủy liên kết sự kiện khỏi việc đóng hộp thoại phương thức?
- 5. Làm thế nào để đóng modal bằng cách nhấp vào nền (Twitter Bootstrap)
- 6. Làm thế nào để thay đổi màu nền twitter bootstrap
- 7. Làm thế nào để làm cho phương thức hộp thoại jQuery?
- 8. Twitter Bootstrap/jQuery - Làm thế nào để tạm thời ngăn chặn phương thức bị đóng?
- 9. Làm thế nào để tạo một tiêu đề lưới bằng cách sử dụng Twitter Bootstrap?
- 10. GLSurfaceView - làm thế nào để làm cho nền mờ
- 11. Làm thế nào để sử dụng Twitter Bootstrap 3 cho trang web không đáp ứng?
- 12. Làm thế nào để sử dụng hộp thoại md với hình thức đầu vào trong angularjs?
- 13. Hộp thoại số 4 và hộp thoại phương thức
- 14. Làm thế nào để kiểm tra các hộp thoại phương thức với Selenium?
- 15. Sử dụng WindowFinder để tìm một hộp thoại phương thức
- 16. Làm thế nào để kích hoạt khung nền của Bootstrap?
- 17. Làm thế nào tôi có thể quản lý tốt nhất nhiều hộp thoại phương thức khởi động twitter
- 18. twitter bootstrap modal không thực sự phương thức
- 19. Làm thế nào để bạn ngăn hộp thoại in khi sử dụng phương pháp Excel PrintOut
- 20. Làm cách nào để có được kết quả từ hộp thoại phương thức trong JQuery
- 21. twitter bootstrap - màu nền cũng
- 22. Twitter bootstrap: làm thế nào để thêm lề bên?
- 23. Nền toàn thân với Twitter Bootstrap
- 24. Làm thế nào để mở một hộp thoại phương thức trong Java applet?
- 25. Làm cách nào để thay đổi tốc độ mờ dần cho các thông điệp cảnh báo trong Twitter Bootstrap?
- 26. Khi tạo một hộp thoại với jquery, làm thế nào để ẩn div hộp thoại?
- 27. Làm thế nào để ngăn chặn bootstrap phương thức đóng từ nút bằng cách sử dụng onclick?
- 28. Tôi làm cách nào để chuyển Bộ sưu tập sang cửa sổ hộp thoại phương thức?
- 29. MFC - mờ cửa sổ chính khi hiển thị hộp thoại phương thức
- 30. Twitter-bootstrap: Làm thế nào để sử dụng class-fluid class đúng cách?
Nhưng không hoạt động trong MSIE 9 và Firefox. – eugenes
Có một cách để làm cho nó hoạt động trong IE và Firefox chi tiết [ở đây] (http://stackoverflow.com/a/15813429/1563940). Tôi không biết chắc chắn rằng nó hoạt động, mặc dù. – lucian
Nếu phương thức bên trong container? – lifecom