Twitter toolstip và độ mờ bật lên và lớp phủ bật lên

Question

Tôi đang cố gắng quyết định chú giải công cụ hoặc cửa sổ bật lên .. hoặc sử dụng cả hai dựa trên nhu cầu. Đây là vấn đề.

Tôi có thanh điều hướng cố định trên đầu trang trên trang web của mình. Trang web có màu trắng và thanh điều hướng có màu xanh đậm.

Khi sử dụng chú giải công cụ, nó sẽ chồng lên trên thanh điều hướng và có độ mờ nhẹ với nó mà tôi thực sự không quan tâm. Khi sử dụng cửa sổ bật lên, nó không có độ mờ đục nhưng ẩn đằng sau thanh điều hướng trên cùng.

Vì vậy, tôi đoán đây là câu hỏi kép nếu tôi muốn sử dụng cả hai. Làm cách nào để loại bỏ độ mờ của chú giải công cụ và làm cho cửa sổ bật lên di chuột qua thanh trên cùng. Có tùy chọn sử dụng cả hai đều lý tưởng.

Answer 1

Cả hai thay đổi này đều có thể được giải quyết bằng cách sử dụng một chút CSS. Tôi khuyên bạn không nên trực tiếp sửa đổi CSS Bootstrap của Twitter mà thay vào đó hãy liên kết với một biểu định kiểu khác. Đảm bảo bao gồm biểu định kiểu mới này sau khi bao gồm biểu định kiểu Bootstrap để nó ghi đè lên Bootstrap CSS. Tại thời điểm viết, phiên bản mới nhất của Bootstrap là 2.1.1, vì vậy tất cả các nhận xét đều dựa trên giả định đó.

Đối với Tooltip

Hiệu quả của các tooltip được xác định trong quy tắc .tooltip.in on line 5003 như sau:

.tooltip.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
} 

Để loại bỏ các hiệu ứng, chèn vào kiểu mới của bạn sau:

.tooltip.in { 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 

Đối Popover

Trên web, một đối tượng được đặt dưới một đối tượng khác do chỉ mục z thấp hơn. Z-index của popover được định nghĩa trong dòng 5080 như sau:

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    ... 
} 

Trong phiên bản này của Bootstrap, tuy nhiên, mặc định (tĩnh) navbar, không có một bộ z-index rõ ràng, vì vậy nó mặc định 0. Vì đó là trường hợp, cửa sổ bật lên đã nằm trên thanh điều hướng.Nếu bạn đang sử dụng phiên bản Bootstrap cũ hơn, bạn có thể sửa lỗi này bằng cách tìm chỉ mục z của thanh điều hướng và thiết lập chỉ mục z của cửa sổ bật lên thành số cao hơn. Bạn có thể làm điều đó bằng cách thêm mã sau vào biểu định kiểu mới:

.popover { 
    z-index: ###; 
} 

Answer 2

Điều này phụ thuộc vào phiên bản bootstrap bạn đang sử dụng, nhưng độ mờ sẽ được đặt trong tệp bootstrap.css. (Tôi nhìn vào v2.0.1)

duy nhất thiết tôi có thể nhìn thấy trong tập tin bootstrap.css opacity là trên dòng 2963:

.tooltip.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
} 

Vì vậy, bạn có thể thay đổi giá trị opacity để bất cứ điều gì phù hợp tốt hơn.

Đối với thả nổi bên dưới thanh điều hướng, điều này sẽ do đó là z-index so với thanh điều hướng. Các z-index của popover tọa lạc trên đường 2857:

.modal-open .popover { 
    z-index: 2060; 
} 

Vì vậy, bạn có thể thay đổi điều đó với một z-index cao hơn được sử dụng cho navbar tĩnh.

Hy vọng điều này sẽ hữu ích.