J'utilise bootstrap sur une application Web qui contient des pages contenant des iframes. À ce stade, nous ne sommes pas en mesure de supprimer les iframes. Bootstrap Dropdown Les menus fonctionnent bien pour s'ouvrir, mais si vous cliquez sur n'importe quelle zone de la page qui fait partie de l'iframe L'événement d'effondrement ne s'intégrera pas.
5 Réponses :
La fermeture de la liste déroulante est déclenchée par un clic sur la page.
Étant donné que l'iframe n'est pas la page, il ne ferme pas.
Vous devez supprimer Affiche ensuite une DIV transparente en haut de l'iframe par exemple et avec JavaScript (JQuery Personnaly) Supprimer la classe data-toggle = "Dropdown" appelez la liste déroulante avec JavaScript $ ('. Dropdown-bascule'). Dropdown ()
.Transparent-masque
.Open de .dropdown On cliquer sur .Transparent-masque ou le document.
Pourquoi ne pouvez-vous pas conserver l'attribut bascule de données ? Vous pouvez toujours retirer les cours manuellement, vous ne pouvez-vous pas?
@sherbrow i supprimé Data-Toggle = "Dropdown" pour désactiver le comportement par défaut du plugin et l'appeler via JQuery. Ensuite, la jQuery peut créer le transparent div pour couvrir l'iframe.
Merci @baptme - Je vois où tu vas avec ça. J'ai une complication supplémentaire: j'ai besoin de pouvoir cliquer sur des éléments dans l'iframe. Je pense que avec votre méthode, je n'ai besoin que de rendre la division transparente visible lorsque la liste déroulante est ouverte. C'est logique?
@Voodoo Ça fait un sens parfait, vous pouvez peut-être fermer la liste déroulante sur JQuery Document Copout (non testé)
basé sur @baptme réponse et certains Conseils sur la fabrication d'une superposition Trouvé dans une autre question, j'ai pu obtenir cela pour travailler. L'astuce était de l'obtenir afin que vous puissiez toujours interagir avec le contenu de l'iframe lorsque le menu était fermé.
Ce que j'ai fait est de mettre une superposition sur la zone iframe - car la taille de l'iframe varie sur différentes parties du site, j'ai utilisé JQuery pour générer dynamiquement la taille. Par défaut Set Voir le Fiddle de travail ici .
Je n'avais pas besoin de devoir supprimer le Espérons que les autres trouveront cela utile! Visibilité: Caché . Ensuite, j'ai dû modifier le bootstrap-tomber.js pour modifier la visibilité lorsque la liste déroulante est ouverte.
Data-Toggle = "Dropdown" ou la classe .Open comme suggéré à l'origine.
J'ai résolu ce problème en utilisant une approche différente. Ma solution consistait à ajouter un événement flou à la fenêtre. Peut-être pas aussi élégant que certaines des autres suggestions, mais c'est celui que j'ai trouvé fonctionné. Je voulais éviter une superposition ou un masque transparent, cela semblait donc une bonne alternative. J'espère que les suggestions sur l'amélioration de cette approche.
J'ai utilisé votre solution. Et cela a fonctionné comme un charme .. J'étais dans le même bateau que vous ne pouvez pas utiliser de masque transparent .. Merci.
J'ai couru à travers ce poste aujourd'hui et j'ai trouvé que le code suivant a fonctionné pour moi. Je viens d'attacher aux événements Bootstrap et j'ai créé une toile de fond à la volée. Je voulais définir l'opacité afin que l'utilisateur sache qu'un clic sur la partie iframe ne ferait rien. En outre, j'ai des pages qui n'incluent pas d'iframe et je voulais qu'ils fonctionnent de la même manière. Je devais également désactiver le défilement des pages non iframe. J'espère que ce code aide.
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");
});
});
Il y a plus de cas que le menu déroulant ne s'effondre pas lorsque vous cliquez sur une autre zone, par exemple. Si l'utilisateur clique sur un autre élément utilisé Mes solutions: P> événement.stoppropagation (); code> sur un événement de clic. $(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');
});
});