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

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.