CODEWITHSUNDEEP
ajaxtwitter-bootstrapmodal-dialogpopover
Adham
Adham

Reputation: 64904

Displaying a popover inside Modal for bootstrap twitter library

I call a page using jquery ajax, and get the response and display it in bootstrap modal. This page displays a popover when it's called in the browser separately using the function 

   $('a[rel=popover]').popover();

the popover appears, but inside the modal the popover doesn't appear.

Update:

the problem is JS problem, where the error is $('a[rel=popover]').popover is not a function

Upvotes: 1

Views: 5209

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10141

See the problem here is that the popover is displayed even inside the modal but as the z-index of modal is greater than that of the popover you would not be able to see it. I changed the z-index of the popover element and now it is working, so you can refer this JSFIDDLE to see a live example.

CSS :

.popover{
    z-index:100000000;
}

Upvotes: 2

Femi
Femi

Reputation: 64700

With Bootstrap you'll find that the popover and the modal have the same z-index:

.modal .popover,.modal .twipsy{z-index:12000;}

You'll need to manually over ride the popover z-index if the containing element is a modal: I'm not sure you can use CSS to do it, but you can definitely do it in js.

Upvotes: 1

Related Questions