Bootstrap dropdown nicht einstürzt, wenn ein Klick über iframe

Ich bin mit Bootstrap auf eine web-app, hat einige Seiten enthalten iframes. In dieser Zeit sind wir nicht in der Lage zu entfernen der iframes. Bootstrap dropdown-Menüs funktionieren, zu öffnen, aber wenn Sie klicken Sie auf eine beliebige Stelle auf der Seite, die Teil des iframe-der Zusammenbruch-Ereignis nicht ausgelöst.

Beispiel hier:
http://jsfiddle.net/mark47/bCzMf/3/

Klicken Sie zum schließen des Menüs eine beliebige Stelle außerhalb des iframe und dann innerhalb des iframe. Hinweis: iframe-Inhalt nicht scheinen zu zeigen, bis in der Geige, aber Sie können sehen, meine problem.

Jede Idee, wie es zusammenbrechen, wenn Sie auf eine beliebige Stelle auf der Seite?

UPDATE: Mit der Hilfe von @baptme Antwort, ich war in der Lage, um es arbeiten. Beschrieben in meiner Antwort weiter unten.

InformationsquelleAutor Voodoo | 2012-07-05
  1. 1

    Die Schließung der dropdown-ausgelöst durch einen Klick auf die Seite.

    Da der iframe nicht die Seite, die es nicht schließen.

    Müssen Sie entfernen data-toggle="dropdown" rufen Sie die dropdown mit javascript $('.dropdown-toggle').dropdown()

    zeigen dann ein transparentes div-Element auf der Oberseite des iframe zum Beispiel .transparent-mask

    und mit javascript (jQuery personnaly) entfernen Sie die .open Klasse aus .dropdown auf klicken Sie auf .transparent-mask oder das Dokument.

    • Warum kann man nicht halten Sie die data-toggle - Attribut ? Man kann immer noch entfernen Sie die Klassen manuell, können Sie nicht ?
    • Ich entfernte data-toggle="dropdown" zu deaktivieren Sie das default-Verhalten des plugins, und rufen Sie es via jQuery. Dann die jQuery erstellen kann, die transparente div-Element zum abdecken der iframe.
    • Danke @baptme - ich sehe, wohin du gehst, mit diesem. Ich habe eine weitere Komplikation: ich muss in der Lage sein, klicken Sie auf Elemente im iframe. Ich denke, mit deiner Methode, ich muss nur das transparente div-Element sichtbar ist, wenn die Dropdownliste geöffnet ist. Das Sinn?
    • es macht Sinn, Sie können vielleicht in der Nähe der Dropdownliste auf jQuery document focusout (nicht getestet)
    InformationsquelleAutor baptme
  2. 7

    Ich dieses problem gelöst, mit einem anderen Ansatz. Meine Lösung ist, fügen Sie ein blur-Ereignis an das Fenster. Vielleicht nicht so elegant, wie einige der anderen Vorschläge, aber das ist die, die ich gefunden funktioniert.

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

    Wollte ich vermeiden, die eine überlagerung oder die transparente Maske, so schien dies wie eine gute alternative. Ich würde begrüßen Vorschläge zur Verbesserung dieses Ansatzes.

    • Ich habe Ihre Lösung. und es funktionierte wie ein Charme.. ich war im selben Boot wie du, nicht transparente Maske.. Danke.
    InformationsquelleAutor Witchfinder
  3. 0

    Basierend auf @baptme Antwort und Tipps zur Erstellung einer overlay in einer anderen Frage, ich war in der Lage, diese zu arbeiten. Der trick war es immer, so konnte Sie immer noch die Interaktion mit dem Inhalt des iFrames, wenn das Menü geschlossen wurde.

    Was ich gemacht habe, stellen eine überlagerung über den iframe-Bereich-da die Größe des iframe unterschiedlich auf verschiedene Teile der Website, die ich verwendet jquery, um dynamisch zu generieren, die Größe. Standardmäßig visibility: hidden. Dann musste ich ändern bootstrap-dropdown.js ändern Sie die Sichtbarkeit, wenn die Dropdownliste geöffnet ist.

    Sehen die arbeiten Geige hier.

    Ich nicht haben, entfernen Sie die data-toggle="dropdown" oder die .open - Klasse, wie ursprünglich vorgeschlagen.

    Hoffentlich auch andere das nützlich finden!

    InformationsquelleAutor Voodoo
  4. 0

    Lief ich auf diesen Beitrag heute und fanden die folgende code funktionierte für mich. Ich nur angebracht, um die bootstrap-Veranstaltungen und schuf eine Kulisse, die auf die Fliegen. Ich wollte, um die Deckkraft an, damit der Benutzer wusste, dass ein Klick auf das iframe-Teil würde nicht alles tun. Auch ich habe Seiten, die nicht über ein iframe, und ich wollte, dass Sie die gleiche Funktionsweise. Ich hatte zu deaktivieren, scrollen, für die nicht-iframe-Seiten als gut. Hoffe, dieser code hilft.

    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");
    });
});
    InformationsquelleAutor Bret
  5. 0

    Gibt es weitere Fälle der drop-down-Menü nicht zusammenbrechen, wenn Sie auf einen anderen Bereich, z.B. wenn der Benutzer klickt auf ein weiteres element, das verwendet werden event.stopPropagation(); auf ein click-Ereignis.

    Meine Lösungen: 

    $(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');
    });
});

    Dank @Witchfinder, ich mischte Ihre Lösung für das Iframe-Problem.

    InformationsquelleAutor Roy Shoa
Schreibe einen Kommentar