Bootstrap dropdown doesn't collapse when clicking over iframe

Question

I'm using Bootstrap on a web app that has some pages that contain iframes. At this time, we're not able to remove the iframes. Bootstrap dropdown menus work fine to open, but if you click on any area of the page that's part of the iframe the collapse event doesn't fire.

Example here: http://jsfiddle.net/mark47/bCzMf/3/

Try clicking to close the menu anywhere outside the iframe and then within the iframe. Note: iframe content doesn't seem to show up in the fiddle, but you can see my problem.

Any idea how to make it collapse when clicking anywhere on the page?

UPDATE: With the help of @baptme answer, I was able to get it working. Described in my answer below.

Answer 1

I resolved this problem using a different approach. My solution was to add a blur event to the window. Perhaps not as elegant as some of the other suggestions, but this is the one that I found worked.

$(window).on('blur',function() { $('.dropdown-toggle').parent().removeClass('open'); } );

I wanted to avoid an overlay or transparent mask, so this seemed like a good alternative. I'd welcome suggestions on improving this approach.

Answer 2

The closure of the dropdown is triggered by a click on the page.

Since the iframe is not the page, it doesn't close.

You must remove data-toggle="dropdown" call the dropdown with javascript $('.dropdown-toggle').dropdown()

then display a transparent div on the top of the iframe for example .transparent-mask

and with javascript (jQuery personnaly) remove the .open class from .dropdown on click on .transparent-mask or the document.