web-dev-qa-db-fra.com

Comment réinitialiser le modal bootstrap quand il est fermé et l'ouvrir à nouveau?

J'ai une zone de liste dans le modal bootstrap et un bouton. Lorsque le bouton est cliqué, un nouveau bouton est rendu dans un div du modal. Lorsque je ferme le modal et que je le rouvre, la dernière opération effectuée sur le modal, à l'instar du bouton précédemment rendu, est toujours présente dans le modal.

Comment réinitialiser le modal de manière à ce que le bouton ne soit pas présent à la réouverture du modal et que l'utilisateur puisse à nouveau sélectionner l'option dans la zone de liste et cliquer sur le bouton pour afficher un nouveau bouton, etc.

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

            </div>
          </div>
        </div>

-- Mise à jour ---

Pourquoi ça ne marche pas?

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>
javascriptjqueryhtml5twitter-bootstrap
52
New to Rails

Il suffit de réinitialiser manuellement le contenu lorsque modal est masqué:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

Il y a plus d'événements. En savoir plus sur eux ici

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
45
Justinas

Ce qui m'a aidé, a été de mettre la ligne suivante dans la fonction Ready:

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

Lorsqu'une fenêtre modale est fermée et ouverte à nouveau, les valeurs entrées et sélectionnées précédemment sont réinitialisées aux valeurs initiales.

J'espère que cela vous aidera aussi!

22
eheydenr

Essayez de cloner, puis de supprimer et d'ajouter de nouveau l'élément lorsque le modal est masqué. Cela devrait garder tous les événements, bien que je n’aie pas testé cela à fond avec toutes les versions de tout.

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});
15
Rob

Essayé et fonctionne bien

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

reset est une fonction prédéfinie, vous pouvez également utiliser $(this).find('form')[0].reset();

Et la classe modale de Bootstrap expose quelques événements à intégrer dans la fonctionnalité modale, détail ici .

hide.bs.modal Cet événement est déclenché immédiatement lorsque la méthode d'instance de masquage a été appelée.

hidden.bs.modal Cet événement est déclenché lorsque l'utilisateur n'a pas caché le modal (attend la fin des transitions CSS).

11
Vatsal Shah

Pour réinitialiser tous les champs de saisie d'un modal, utilisez ce qui suit.

$(".modal-body input").val("")
8
seetha

Voici une solution alternative.

Si vous apportez de nombreuses modifications au DOM (ajout/suppression d’éléments et de classes), plusieurs opérations peuvent nécessiter une "réinitialisation". Plutôt que d'effacer chaque élément à la fermeture du modal, vous pouvez réinitialiser l'intégralité du modal chaque fois qu'il est rouvert.

Exemple de code:

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

Vous pouvez toujours écrire votre état initial en HTML sans trop vous inquiéter de ce qui va arriver plus tard. Vous pouvez écrire votre code JS d'interface utilisateur sans craindre de devoir nettoyer plus tard. Chaque fois que le modal est relancé, il sera réinitialisé exactement au même état qu’il était la première fois.

Edit: Voici une version qui devrait gérer plusieurs modaux (je ne l’ai pas testée) ...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()
3
musicin3d
(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

C'est la solution idéale pour supprimer les contacts en masquant/fermant bootstrap modal.

2
Shamim Hasan

tu peux essayer ça

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');
});

Il supprimera toutes les données du modèle et le réinitialisera.

0
Jigarb1992

Les instructions ci-dessous montrent comment ouvrir/rouvrir Modal sans utiliser bootstrap.

Ajouter deux classes en css

Et utilisez ensuite jQuery ci-dessous pour rouvrir le modal s’il est fermé.

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

 $("#Modal").removeClass('hide_block');
 $("#Modal").addClass('display_block');
 $("Modal").show("slow");

Cela a bien fonctionné pour moi :)

0
Kiran Kumar D M

J'utilise BS 3.3.7 et j'ai un problème lorsque j'ouvre un modal, puis le ferme, le contenu du modal reste du côté client sans html ("") ni clair du tout. Donc, je l'ai utilisé pour supprimer complètement le code à l'intérieur du div modal. Eh bien, vous pouvez vous demander pourquoi le code de remplissage-droit, dans chrome pour Windows lorsqu’il ouvre un modal à partir d’un autre modal et ferme ce second modal, les séjours avec un remplissage à droite de 17px. J'espère que ça aide...

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})
0
João Falcão

/ * cela va changer le contenu HTML avec le nouveau HTML que vous voulez mettre à jour dans votre modal sans trop de réinitialisations ... * /

var = ""; //HTML to be changed

`$ (". classbuttonClicked "). click (function () {

$ ('# ModalDivToChange'). Html (var); $ ('# myModal'). modal ('show'); }); `

0
giuseppe