7

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.

Voodoo
  • 1,014
  • 1
  • 15
  • 29

5 Answers5

8

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.

Witchfinder
  • 198
  • 2
  • 9
  • I used your solution. and it worked like a charm.. i was in same boat as you to not use transparent mask.. Thank you. – AJP Dec 11 '14 at 17:19
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.

baptme
  • 10,062
  • 3
  • 52
  • 57
  • Why can't you keep the `data-toggle` attribute ? You can still remove the classes manually, can't you ? – Sherbrow Jul 05 '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. – baptme Jul 05 '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? – Voodoo Jul 06 '12 at 16:52
  • @Voodoo it makes perfect sense, you can maybe close the dropdown on jQuery document focusout (not tested) – baptme Jul 06 '12 at 17:17
0

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.

See the working fiddle here.

I didn't have to have to remove the data-toggle="dropdown" or the .open class as originally suggested.

Hopefully others will find this useful!

Community
  • 1
  • 1
Voodoo
  • 1,014
  • 1
  • 15
  • 29
0

I ran across this post today, and found the following code worked for me. I just attached to the bootstrap events and created a backdrop on the fly. I wanted to set opacity so the user knew that clicking on the iframe part wouldn't do anything. Also, I have pages that don't include an iframe and I wanted them to function the same way. I had to disable scrolling for the non iframe pages as well. Hope this code helps.

var navBackdrop =
    $('<div id="nav-backdrop" class="modal-backdrop" tabindex="-1" style="z-index: 0; top: 50px; overflow-y: auto; display: none; opacity: .4"></div>');

$(document).ready(function () {
    $("body").append(navBackdrop);

    $(".navbar").on("shown.bs.dropdown", ".dropdown", function () {
        navBackdrop.show();
        $("body").css("overflow", "hidden");
    }).on("hide.bs.dropdown", ".dropdown", function () {
        navBackdrop.hide();
        $("body").css("overflow", "auto");
    });
});
Bret
  • 401
  • 2
  • 4
0

There are more cases the drop-down menu doesn't collapse when clicking on another area, e.g. if the user clicks on another element that used event.stopPropagation(); on a click event.

My Solutions: 

$(document).on('show.bs.dropdown', function ( event ) {

    //Get the element that responsible on opening the drop-down (parent of the clicked element)
    var $target = $(event.target);

    //Close the menu when the user click on any area
    $(document).one( 'mouseup.collapseBsDropdown', function() {
         $target.removeClass('open');
         $(window).off('blur.collapseBsDropdown');
    });
    $(window).one( 'blur.collapseBsDropdown', function() {
        $target.removeClass('open');
        $(document).off('mouseup.collapseBsDropdown');
    });
});

Thanks to @Witchfinder, I mixed your solution for the Iframe issue.

Roy Shoa
  • 3,117
  • 1
  • 37
  • 41