Geek Answers Handbook

Bootstrap popup does not crash when clicked on iframe

I am using Bootstrap in a web application with multiple pages containing iframes. At this time, we cannot remove iframes. The Bootstrap pop-up menu works fine, but if you click on any area of ​​the page that is part of the iframe, the stall event does not fire.

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

Try clicking to close the menu anywhere outside the iframe, and then in the iframe. Note. The contents of the iframe are not like a script, but you can see my problem.

Any idea how to make it reset when clicked anywhere on the page?

UPDATE: with @baptme's answer, I was able to get it working. Described in my answer below.

+4
source share
5 answers

Closing the drop-down menu is started by clicking on the page.

Since the iframe is not a page, it does not close.

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

then display the transparent div at the top of the iframe, e.g. .transparent-mask

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

+1
source

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

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

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

+6
source

Based on @baptme's answer and some overlay creation tips found in another question, I was able to get this to work. The trick was that you could interact with the contents of the iframe when the menu was closed.

What I did was overlay on top of the iframe area - since the size of the iframe depends on different parts of the site, I used jquery to dynamically create the size. Set visibility: hidden default. Then I had to modify bootstrap-dropdown.js to change the visibility when the dropdown is open.

See working fiddle here .

I did not have to remove the data-toggle="dropdown" or .open , as was originally proposed.

Hope others find this helpful!

0
source

Today I came across this post and found that the following code worked for me. I just got attached to bootstrap events and created the background on the fly. I wanted to set the opacity so that the user knew that clicking on the iframe part would do nothing. Also, I have pages that do not include iframes, and I wanted them to function the same. I had to disable scrolling for non iframe pages. 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"); }); });
0
source

There are more cases where the drop-down menu does not crash when you click on another area, for example. if the user clicks on another element that used event.stopPropagation(); in the 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 chose a solution for the Iframe problem.

0
source

More articles:


All Articles