2011-10-06 45 views
7

Tôi muốn sử dụng hiệu ứng popover trên một hộp thoại modals hiện có bằng cách sử dụng Thư viện CSS Bootstrap từ Twitter. Tôi liên kết cửa sổ bật lên với biểu tượng hình ảnh nhỏ.Bootstrap: popover trên các phương thức

$('#infoIcon').popover({ 
    offset: 50, 
    placement: 'right' 
}); 

Các modals bản thân cũng được bổ sung theo các tài liệu:

$('#modalContainer').modal({ 
    keyboard : true 
}); 

Nhưng hiệu quả tôi đã có được, rằng popover được render THEO container phương thức thay VỀ div modal (xem ảnh chụp màn hình bên dưới). Làm thế nào tôi có thể mang lại popover thực sự TRÊN div phương thức?

enter image description here

Trả lời

9

Những người ở Bootstrap xác định vấn đề này là lỗi và sửa lỗi cho bản phát hành tiếp theo. see more details here

1

Cố gắng kiểm tra giá trị z-index của một cửa sổ là những gì và sửa đổi z-index cho nhau với một giá trị vượt trội. Bạn có thể thực hiện việc này với chức năng jQuery css nếu các plugin mà bạn đang sử dụng không cho phép thay đổi này trong các thông số đầu vào của chúng.

5

Trong khi đó bạn có thể thử:

$('#infoIcon').popover({ 
    offset: 50, 
    placement: 'right' 
}); 

$("#infoIcon").data('popover').tip().css("z-index", 1060); 
5

Bạn không cần javascript cho rằng, chỉ cần thiết lập z-index của popover qua CSS:

.popover { 
    z-index: 1060; 
} 
2

nếu bạn cần phải làm việc trên bay, bạn nên sử dụng

$("<style type='text/css'> .popover{z-index:1060;} </style>").appendTo("head"); 
Các vấn đề liên quan