La toile de fond modale de bootstrap de Twitter ne disparaît pas

J'utilise la boîte de dialogue Modal d'amorçage Twitter. Lorsque je clique sur le bouton Soumettre de la boîte de dialogue modale de démarrage, il envoie une demande AJAX. Mon problème est que le fond modal ne disparaît pas. La boîte de dialogue Modale disparaît correctement, mais à la place, "fond modal" qui crée l'opacité à l'écran reste

Que puis-je faire?

Assurez-vous que vous ne remplacez pas le conteneur contenant la fenêtre modale réelle lorsque vous effectuez la demande 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 Ajax, supprimez le modal, puis remplacez les données.

Si cela ne fonctionne pas, vous pouvez toujours le forcer à disparaître en procédant comme suit:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Assurez-vous que votre appel initial à $.modal()pour appliquer le comportement modal ne transmet pas plus d'éléments que prévu. Si cela se produit, il finira par créer une instance modale, complète avec l'élément backdrop, pour CHAQUE élément de la collection. Par conséquent, il peut sembler que la toile de fond a été laissée derrière, alors qu'en réalité vous regardez l'un des doublons.

Dans mon cas, j'essayais de créer le contenu modal à la volée avec un code comme celui-ci:

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

Ici, le commentaire HTML après la </div>balise de fermeture signifiait que myModal était en fait une collection jQuery de deux éléments - le div et le commentaire. Tous deux ont été consciencieusement transformés en modaux, chacun avec son propre élément de toile de fond. Bien sûr, le modal fait à partir du commentaire était invisible en dehors de la toile de fond, donc quand j'ai fermé le vrai modal (le div), il semblait que l'arrière-plan avait été laissé.

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

Bien que les autres réponses fournies soient utiles et valides, il m'a semblé un peu compliqué de recréer efficacement la fonctionnalité de masquage modal de Bootstrap, j'ai donc trouvé une solution plus propre.

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

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

Lorsque vous remplacez ensuite un tas de code HTML à la suite de la demande AJAX, les événements de masquage modal ne se terminent pas. Cependant, Bootstrap déclenche un événement lorsque tout est terminé , et vous pouvez vous y connecter comme suit:

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

J'espère que cela vous sera utile!

Insérez dans votre bouton d'action ceci:

data-backdrop="false"

et

data-dismiss="modal" 

exemple:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

si vous saisissez ce data-attr, le .modal-backdrop n'apparaîtra pas. documentation à ce sujet sur ce lien: http://getbootstrap.com/javascript/#modals-usage

Si vous utilisez un copier-coller du site getboostrap lui-même dans un sélecteur généré en HTML, assurez-vous de supprimer le commentaire '<! - /.modal ->'. Bootstrap devient confus et pense que le commentaire est un deuxième élément modal. Il crée un autre retour arrière pour ce "deuxième" élément.

Je sais que c'est un très vieux poste, mais cela pourrait aider. Ceci est une très petite solution de contournement par moi

$('#myModal').trigger('click');

C'est tout, cela devrait résoudre le problème

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

1. Ouvrez la fenêtre modale
2. Faites quelques opérations, puis cliquez sur "OK", validez-les et fermez le modal
3. Ouvrez à nouveau le modal et supprimez-le en cliquant sur "Annuler"
4. Rouvrez le modal, cliquez à nouveau sur "Annuler" ==> le fond n'est plus accessible!

eh bien, mon prochain bureau a sauvé ma journée: au lieu d'invoquer $('#myModal').modal('hide'), attribuez à vos boutons l'attribut data-dismiss="modal"et ajoutez un événement "clic" à votre bouton "Soumettre". Dans mon problème, le code HTML (enfin TWIG) du bouton est:

<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 "clic" n'est attribué au bouton "Annuler". Le modal se ferme maintenant correctement et me permet de rejouer avec la page "normale". Il semble en fait que le data-dismiss="modal"devrait être le seul moyen d'indiquer qu'un bouton (ou n'importe quel élément DOM) devrait fermer un modal Bootstrap. La .modal('hide')méthode semble se comporter d'une manière pas tout à fait contrôlable.

J'espère que cela t'aides!

Ce problème peut également se produire si vous masquez, puis affichez à nouveau la fenêtre modale trop rapidement. Cela a été mentionné ailleurs pour question, mais je fournirai plus de détails ci-dessous.

Le problème est lié au timing et à la transition de fondu. Si vous affichez un modal avant que la transition de fondu sortant pour le modal précédent ne soit terminée, vous verrez ce problème de toile de fond persistant (la toile de fond modale restera à l'écran, à votre manière). Bootstrap ne prend explicitement pas en charge plusieurs modaux simultanés, mais cela semble être un problème même si le modal que vous cachez et le modal que vous affichez sont les mêmes.

Si c'est la bonne raison de votre problème, voici quelques options pour atténuer le problème. L'option n ° 1 est un test rapide et facile pour déterminer si le timing de transition de fondu est effectivement la cause de votre problème.

1. Désactivez l'animation de fondu pour le modal (supprimez la classe "fondu" de la boîte de dialogue)
2. Mettez à jour le texte du modal au lieu de le masquer et de le réafficher.
3. Fixez le timing pour qu'il ne montre pas le modal tant qu'il n'aura pas fini de cacher le modal précédent. Utilisez les événements du modal pour ce faire. http://getbootstrap.com/javascript/#modals-events

Voici quelques articles liés au suivi des problèmes de démarrage. Il est possible qu'il y ait plus de messages de suivi que je n'en ai énumérés ci-dessous.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ('cacher')

Masque manuellement un modal. Retourne à l'appelant avant que le modal ne soit réellement caché (c'est-à-dire avant que l'événement hidden.bs.modal ne se produise).

Donc au lieu de

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

faire

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Vous êtes donc certain d'attendre la fin de l'événement "hide".

Une autre erreur possible qui pourrait produire ce problème,

Assurez-vous que vous n'avez pas inclus le bootstrap.jsscript plus d'une fois dans votre page!

Même j'ai rencontré un problème similaire, j'avais les deux boutons suivants

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Je voulais effectuer une opération ajax et en cas de succès de cette opération ajax fermer le modal. Voici donc ce que j'ai fait.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

J'ai déclenché l'événement click du bouton 'Non' qui avait la data-dismiss="modal"propriété. Et cela a fonctionné :)

utilisation:

$('.modal.in').modal('hide') 

La source

Cette solution concerne Ruby on Rails 3.x et un fichier js.erb qui reconstruit une partie du DOM, y compris le modal. Cela fonctionne indépendamment du fait que l'appel ajax provienne du modal ou d'une autre partie de la page.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Merci à @BillHuertas pour le point de départ.

$ ('# myModal'). trigger ('click');

Cela a fonctionné pour moi. Il ne se ferme pas parce que lorsque vous ouvrez la fenêtre contextuelle, il déclenche 2 ou 3 backdrops modaux. Donc quand vous faites $ ('# myModal')). Modal ('hide'); il n'effectue qu'une seule toile de fond modale et le reste reste.

problème avec le panneau de mise à jour.

Mon problème était dû à l'emplacement du panneau de mise à jour. J'ai eu l'intégralité du modal dans le panneau de mise à jour. Si vous déclarez le modal en dehors du panneau de mise à jour et que vous avez juste à dire, le corps du modal, dans le panneau de mise à jour, alors le $ ('# myModalID'). Modal ('hide'); travaillé.

Un autre point de vue sur cette question. (J'utilise la version 3.3.6 de bootstrap.js)

Je me suis trompé d'initialiser le modal à la fois manuellement en javascript:

$('#myModal').modal({
   keyboard: false
})

et en utilisant

data-toggle="modal"

dans ce bouton comme l'exemple ci-dessous (montré dans le document)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

de sorte que le résultat sa créer deux instances de

<div class="modal-backdrop fade in"></div>

ajouter au corps de mon html lors de l'ouverture du modal. Cela peut être la cause lors de la fermeture du modal en utilisant la fonction:

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

il supprime une seule instance de toile de fond (comme indiqué ci-dessus) afin que la toile de fond ne disparaisse pas. Mais il a disparu si vous utilisez data-dismiss="modal"add on html comme le montre le doc bootstrap.

Donc, la solution à mon problème est d'initialiser uniquement le modal manuellement en javascript et de ne pas utiliser d'attribut de données. De cette façon, je peux à la fois fermer le modal manuellement et en utilisant des data-dismiss="modal"fonctionnalités.

J'espère que cela vous aidera si vous rencontrez le même problème que moi.

Pour info au cas où quelqu'un se heurterait encore à ça ... J'ai passé environ 3 heures à découvrir que la meilleure façon de le faire est la suivante:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Cette fonction pour fermer le modal est très peu intuitive.

L'ajout data-dismiss="modal"de boutons dans mon modal a fonctionné pour moi. Je voulais que mon bouton appelle une fonction avec angulaire pour lancer un appel ajax ET fermer le modal, j'ai donc ajouté un .toggle()dans la fonction et cela a bien fonctionné. (Dans mon cas, j'ai utilisé un bootstrap modalet j'en ai utilisé certains angular, pas un véritable contrôleur modal).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

J'ai eu le même problème. J'ai découvert que c'était dû à un conflit entre Bootstrap et JQueryUI.

Les deux utilisent la classe "close". Changer la classe dans l'un ou l'autre corrige cela.

Utilisation de la bascule au lieu de masquer, résolu mon problème

Assurez-vous que vous n'utilisez pas le même ID / classe d'élément ailleurs, pour un élément sans rapport avec le composant modal.

C'est-à-dire .. si vous identifiez vos boutons qui déclenchent les fenêtres contextuelles modales en utilisant le nom de classe «myModal», assurez-vous qu'il n'y a aucun élément sans rapport ayant le même nom de classe.

Après avoir appliqué la solution la mieux notée, j'ai eu un problème de rupture correcte des futurs modaux. J'ai trouvé ma solution qui fonctionne bien

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

J'ai eu le même problème en essayant de soumettre le formulaire. La solution consistait à changer le type de bouton de submità buttonpuis à gérer l'événement de clic de bouton comme suit:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Dans le projet .net MVC4, j'avais le pop-up modal (bootstrap 3.0) dans un Ajax.BeginForm (OnComplete = "addComplete" [code supplémentaire supprimé]). Dans le javascript "addComplete" j'avais le code suivant. Cela a résolu mon problème.

$ ('# moreLotDPModal'). hide ();

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

$ ('. modal-backdrop'). remove ();

$ ('# moreLotDPModal'). removeClass ("in");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

J'ai eu ce même problème.

Cependant, j'utilisais bootbox.js, donc cela aurait pu être quelque chose à voir avec ça.

Dans les deux cas, j'ai réalisé que le problème était dû au fait d'avoir un élément avec la même classe que son parent. Lorsque l'un de ces éléments est utilisé pour lier une fonction de clic pour afficher le modal, le problème se produit.

c'est-à-dire c'est ce qui cause le problème:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

modifiez-le afin que l'élément sur lequel vous cliquez ne soit pas de la même classe que son parent, ses enfants ou tout autre ancêtre. C'est probablement une bonne pratique de le faire en général lors de la liaison des fonctions de clic.

Je travaille avec Meteor et je viens de rencontrer le même problème. La cause de mon bug était la suivante:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Comme vous pouvez le voir, j'ai ajouté le modal dans le reste, donc quand mon modal a mis à jour les informations de contact, le if avait un autre état. Cela a causé le modèle modal à être laissé hors du DOM juste avant sa fermeture.

La solution: sortir le modal du if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

violon -> https://jsfiddle.net/o6th7t1x/4/

la valeur initiale de votre attribut data-backdrop peut être

"statique", "vrai", "faux".

static et true ajoutent l'ombre modale, tandis que false désactive l'ombre, il vous suffit donc de changer cette valeur avec le premier clic sur false. comme ça:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

J'ai eu le problème de gel de l'écran de fond modal, mais dans un scénario légèrement différent: lorsque 2 modaux dos à dos étaient affichés. Par exemple, le premier demanderait une confirmation pour faire quelque chose et après avoir cliqué sur le bouton 'confirmer', l'action rencontrerait une erreur et le 2ème modal allait être affiché pour faire apparaître le message d'erreur. La deuxième toile de fond modale gèlerait l'écran. Il n'y a pas eu de conflits dans les noms de classe ou les identifiants des éléments.

Le problème a été résolu en donnant au navigateur suffisamment de temps pour gérer le contexte modal. Au lieu de prendre immédiatement l'action après avoir cliqué sur `` confirmer '', donnez au navigateur 500 ms pour masquer le premier modal et nettoyer la toile de fond, etc. - puis prenez l'action qui finirait par montrer l'erreur modale.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

La fonction _dialogConfirmed () a le code suivant:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Je suppose que les autres solutions ont fonctionné car elles ont pris suffisamment de temps supplémentaire pour donner au navigateur le temps de nettoyage nécessaire.

Dans ASP.NET, ajoutez une mise à jour pour UpdatePanel sur le code derrière après la commande jquery. Exemple:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();