web-dev-qa-db-fra.com

Comment fermer Bootstrap 3 modal par programme sur AJAX Succès?

J'ai un code que ce que je voulais faire est de fermer le modal sur le succès ajax. Ceci est mon code:

script

success: function() {
    console.log("delete success");
    $('#deleteContactModal').modal('hide');
    $( "#loadContacts" ).load( "/main/loadContacts" );

}

html

<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
<!--everything goes here -->
    </div>
  </div>
</div>

Tout fonctionne, sauf lorsque le code $('#deleteContactModal').modal('hide'); se déclenche, il affiche simplement un écran noir fané comme ceci:

 enter image description here

Le modal se ferme mais la couleur fanée noire est toujours présente. Est-ce que j'ai râté quelque chose? Merci d'avance.

J'utilise bootstrap 3.3.

javascriptjqueryajaxtwitter-bootstraptwitter-bootstrap-3
10
wobsoriano

essayez d'ajouter cet attribut avec votre div modal aria-hidden="true"

par exemple:

<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Voici mon exemple de travail 

<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
                </div>
                <div class="modal-body">
                Modal body content here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div>

et en cas de succès faire de même. 

$("#copy_course_modal").modal('hide');
9
Qazi

J'ai exactement le même problème et la seule façon de travailler est de supprimer individuellement les parties du modal. Il suffit de mettre cette fonction dans yous js et de créer un événement onclick à votre bouton dans votre code HTML ou js. J'espère que j'ai aidé.

function hideModal(){
  $(".modal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $(".modal").hide();
}
8
Vaios P.

J'ai moi-même abordé cette question dans une situation similaire.

Cela semble être lié à la nature asynchrone des animations javascript + bootstrap.

C'est un sale coup, mais emballer l'appel à "se cacher" dans un délai d'attente a fonctionné pour moi:

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

Si vous utilisez cette "solution" au problème, vous devrez peut-être ajuster la valeur du délai d'attente. Les animations bootstrap semblent prendre environ 125 à 200 ms, donc 300 fournit un tampon de sécurité Nice.

6
Steven Smith

Essayer:

$(".modal.in").modal("hide");

Cela cachera le modal actuellement actif.

6
WhoAmI
$('#deleteContactModal').modal('hide')

Trouver ce lien 

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

Il donne des détails https://getbootstrap.com/docs/3.3/javascript/#modal-hide concernant la fenêtre de modèle

2
Jasmeen

Ceci est juste un problème de timing. L'animation de fondu prend du temps et javascript ne peut pas la fermer. annulez simplement l’animation de fondu et cela fonctionne correctement!

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

(Ne pas utiliser class = "modal fade", jus class = "modal")

1
Caravansary

J'ai essayé plusieurs des solutions proposées et la seule qui a fonctionné pour moi a été:

$ (". modal.in"). modal ('masquer');

Certains ont effacé le modal et l'arrière-plan, mais il n'a pas réaffiche les invocations suivantes.

1
eric gilbertson

Simple, cliquez par programme sur le bouton de fermeture de la boîte de dialogue.

$ ("bouton [données-rejet = \" modal\"]"). click ();

Cela fermera automatiquement le dialogue.

1
paraguma

Pour effacer le fond 

$(".modal-backdrop").toggleClass("hide, show");

testé en bs4

0
gondwe

Aucune de ces options ne fonctionnait pour moi, à part celle qui disait de ne pas utiliser de fondu modal. Cependant, je voulais utiliser un fondu modal. Mon code passait un appel ajax pour enregistrer les modifications, puis, en cas de succès, procédait comme suit:

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

Le problème était que doRefresh mettait alors à jour la page sous le modal. Si j'ai supprimé le doRefresh, cela a fonctionné. Donc ce que j'ai fini par faire était ceci:

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
0
Philip Johnson

Ce problème sera résolu en cachant des éléments individuels de modal . 

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();
0
Zoha Irshad