Loading tray: popup on modals

Question

I want to use the popover effect in an existing modal dialog using the Bootstrap CSS library from Twitter. I snap a popover to a small image icon.

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

Mods are also added in accordance with the documentation:

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

But the effect that I have is that the popover is displayed under the modal container instead of the OVER modal div (see screenshot below). How can I cast a popover really to a modal div?

Answer 1

The Bootstrap guys identify this problem as a bug and fixed it for the next version. see here for more details

Answer 2

At the same time, you can try:

 $('#infoIcon').popover({ offset: 50, placement: 'right' }); $("#infoIcon").data('popover').tip().css("z-index", 1060); 

Answer 3

You do not need javascript for this, just set the z-index of the popover via CSS:

 .popover { z-index: 1060; } 

Answer 4

if you need to work on the fly you should use

 $("<style type='text/css'> .popover{z-index:1060;} </style>").appendTo("head"); 

Answer 5

Try to check what the z-index value of one window is and change the z-index for another with an excellent value. You can do this with jQuery css if the plugins you use do not allow this change in their input parameters.