web-dev-qa-db-fra.com

Comment obtenir la fermeture de Twitter bootstrap modal (après le lancement initial)

Je suis vraiment un noob, alors je pense que je supervise quelque chose (probablement évident) avec le modal de bootstrap de Twitter. Ce que j'essaie de faire, c'est de faire en sorte qu'un modal ne soit lancé que sur mobile. Cela fonctionne bien avec l'ajout de la classe .visible-phone sur le modal div. Jusqu'ici tout va bien. Mais ensuite, je veux que cela fonctionne, ce qui signifie que vous pouvez le fermer avec le bouton X. Et je n'arrive pas à faire fonctionner le bouton.

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

Dans le bas du code HTML, je mets jquery.js (premier), bootstrap.modal.js et bootstrap.transition.js. En fait, tous les modules bootstrap js (pour ne pas rater un include) ... je ne suis pas expérimenté avec js ..

S'il vous plaît, pardonnez-moi si je posais un Q. vraiment stupide. Je ne pouvais pas trouver la réponse à cette situation particulière dans le journal.

twitter-bootstrapmodal-dialog
91
Monique De Haas

$('#myModal').modal('hide') devrait le faire

219
ayal gelles

J'ai eu des problèmes à fermer le dialogue modal bootstrap, s'il était ouvert avec:

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

J'ai résolu ce problème en ouvrant le dialogue par le lien suivant: 

<a href="#myModal" data-toggle="modal">Open my dialog</a>

N'oubliez pas l'initialisation:

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

J'ai également utilisé les attributs suivants pour le bouton de fermeture:

data-dismiss="modal" data-target="#myModal"
27
artkoenig

Ajouter la classe hide au modal 

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

Code Javascript

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>
13
shaunak1111

.modal ('hide') masque manuellement un modal. Utilisez le code suivant pour fermer votre modèle bootstrap

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

Regardez travailler codepen ici

Ou

Essayez ici

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

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

<!-- 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" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

13
Subodh Ghulaxe

Essayez de spécifier exactement le mode que le bouton doit fermer avec data-target. Donc, votre bouton devrait ressembler à ceci -

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

De plus, vous ne devriez avoir besoin que de bootstrap.modal.js pour pouvoir supprimer les autres en toute sécurité.

Modifier: si cela ne fonctionne pas, supprimez la classe visible-phone et testez-la sur le navigateur de votre PC plutôt que sur le téléphone. Cela montrera si vous obtenez des erreurs javascript ou si c'est un problème de compatibilité par exemple.

Edit: code de démonstration

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>
6
Simon Cunningham

Selon la documentation, masquer/alterner devrait fonctionner. Mais ce n'est pas le cas.

Voici comment je l'ai fait

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
5
user706001

Essayez ceci ..

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

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

J'ai eu le même problème dans l'iphone ou le bureau, je n'ai pas réussi à fermer la boîte de dialogue lorsque vous appuyez sur le bouton de fermeture.

j'ai découvert que la balise <button> définit un bouton cliquable et est nécessaire pour spécifier l'attribut type d'un élément comme suit:

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

consultez l'exemple de code pour les modaux d'amorçage à l'adresse suivante: Page JavaScript de BootStrap

1
Isma

Voici un extrait de code permettant non seulement de fermer des modaux sans rafraîchissement de la page, mais lorsque vous appuyez sur enter, il soumet modal et se ferme sans rafraîchissement

Je l'ai mis en place sur mon site où je peux avoir plusieurs modaux et certains modaux traitent les données lors de l'envoi et d'autres non. Ce que je fais est de créer un identifiant unique pour chaque modal qui effectue le traitement. Par exemple dans ma page web:

HTML (pied de page modal): 

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY: 

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

Comme vous pouvez le voir, cet envoi effectue un traitement, c’est pourquoi j’ai ce jQuery pour ce modal. Maintenant, supposons que j'ai une autre modale dans cette page Web, mais aucun traitement n'est effectué et, comme une modale est ouverte à la fois, je mets une autre $(document).ready() dans un script global php/js que toutes les pages reçoivent et je donne au bouton de fermeture de la modale une classe appelée ".modal-close":

HTML: 

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery (include global.inc): 

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });
0
yardpenalty

Si vous avez simultanément quelques modaux affichés, vous pouvez spécifier la modale cible du bouton in-modal avec les attributs data-toggle et data-target:

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

En dehors du code modal, vous pouvez avoir un autre bouton bascule:

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

L'utilisateur ne peut pas cliquer sur le bouton bascule en mode modal tant qu'il est caché et qu'il fonctionne correctement avec l'option "modal" pour l'attribut data-toggle. Ce schéma fonctionne automatiquement! 

0
Sound Blaster