Twitter bootstrap modal-toile de fond n ' t disparaissent

Question

J’utilise le dialogue modale bootstrap de Twitter. Quand je clique sur le bouton soumettre de la boîte de dialogue modale bootstrap, il envoie une requête AJAX. Mon problème est que le modal-toile de fond ne disparaît pas. La boîte de dialogue modale ne disparaît correctement, mais plutôt « modal-toile de fond dans » qui crée l’opacité sur l’écran restent

Que puis-je faire ?

Answer 1

Assurez-vous que vous ne remplacez pas le récipient contenant la fenêtre modale réelle quand vous faites la requête AJAX, car Bootstrap ne sera pas en mesure de trouver une référence à celui-ci lorsque vous essayez de le fermer. Dans votre gestionnaire complet de Ajax enlever le modal et remplacez les données.

Si cela ne fonctionne pas vous pouvez toujours forcer pour aller loin en procédant comme suit :

Answer 2

Assurez-vous que votre appel initial $.modal() d'appliquer le comportement modal n'est pas en passant en plus d'éléments que vous le souhaitez. Si cela se produit, il sera à la fin de la création d'un modal exemple, compléter avec de la toile de fond de l'élément, pour CHAQUE élément de la collection. Par conséquent, il pourrait ressembler à de la toile de fond a été laissé derrière, alors qu'en réalité, vous êtes à la recherche à l'un des doublons.

Dans mon cas, j'ai été de tenter de créer l'modale du contenu à la volée avec un peu de code comme ceci:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Ici, le commentaire HTML après la clôture </div> tag signifie que myModal était en fait un jQuery collection de deux éléments - la div, et le commentaire. Ils étaient tous les deux consciencieusement transformés en auxiliaires modaux, chacune avec sa propre toile de fond de l'élément. Bien sûr, le modal faite des commentaire a été invisible en dehors de la toile, alors, quand j'ai fermé le réel modal (div), il ressemblait à l'arrière-plan a été laissé derrière.

Answer 3

Je viens de passer beaucoup trop de temps sur ce problème :)

Tandis que les autres réponses fournies sont utiles et valides, il semblait un peu bordélique pour moi effectivement de recréer le modal cacher des fonctionnalités de Bootstrap, j'ai donc trouvé une solution plus propre.

Le problème, c'est qu'il y a une chaîne d'événements qui se produisent lorsque vous appelez

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Lorsque vous replacez ensuite un tas de HTML comme le résultat de la requête AJAX, le modal-masquage des événements n'est pas fini. Cependant, Bootstrap déclenche un événement, quand tout est fini, et vous pouvez brancher dans qui de la sorte:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Espérons que cela est utile!

Answer 4

J'ai souffert un problème similaire: dans ma fenêtre modale, j'ai deux boutons "Annuler" et "OK". À l'origine, les deux boutons de fermer la fenêtre modale en invoquant $('#myModal').modal('hide') (avec "OK" auparavant, l'exécution du code) et le scénario serait le suivant:

1. Ouvrez la fenêtre modale
2. Faire certaines opérations, puis cliquez sur "OK" faire valider et fermer la modale
3. Ouvrez le modal de nouveau et de rejeter en cliquant sur "Annuler"
4. Ré-ouvrir le modal, cliquez de nouveau sur "Annuler" ==> la toile de fond n'est plus accessible!

bien, mon compagnon de bureau voisin a sauvé ma journée: au lieu d'invoquer $('#myModal').modal('hide'), donner à vos boutons de l'attribut data-dismiss="modal" et ajouter un événement "click" à votre bouton "Soumettre". Dans mon problème, le HTML (bien, TWIG) code pour le bouton:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

et dans mon code JavaScript, j'ai:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

alors qu'aucun événement "click" est attribuée à la touche "Annuler". Le modal se ferme correctement et me permet de jouer de nouveau avec le "normal" de la page. Il semble en fait que l' data-dismiss="modal" devrait être le seul moyen d'indiquer qu'un bouton (ou quel que soit l'élément DOM) devrait fermer un Bootstrap modal. L' .modal('hide') méthode semble se comportent pas tout à fait contrôlable.

Espérons que cette aide!

Answer 5

utilisation :

Source