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.

Why can't you keep the data-toggle attribute ? You can still remove the classes manually, can't you ?
–
SherbrowJul 5 '12 at 20:53

@sherbrow I removed data-toggle="dropdown" to disable the default behaviour of the plugin, and call it via jQuery. Then the jQuery can create the transparent div to cover the iframe.
–
baptmeJul 5 '12 at 21:14

Thanks @baptme - I see where you're going with this. I have one more complication: I need to be able to click on elements within the iframe. I think with your method, I'll need to only make the transparent div visible when the dropdown is open. That make sense?
–
VoodooJul 6 '12 at 16:52

@Voodoo it makes perfect sense, you can maybe close the dropdown on jQuery document focusout (not tested)
–
baptmeJul 6 '12 at 17:17

Based on @baptme answer and some tips on making an overlay found in another question, I was able to get this to work. The trick was getting it so you could still interact with the content of the iframe when the menu was closed.

What I did is put an overlay over the iframe area -- since the size of the iframe varies on different parts of the site, I used jquery to dynamically generate the size. By default set visibility: hidden. Then I had to modify the bootstrap-dropdown.js to change the visibility when the dropdown is open.