Comment fermer le modal d'amorçage Twitter (après le lancement initial)


91

Je suis vraiment un noob, donc je pense que je supervise quelque chose (probablement évident) avec Twitter bootstrap modal. Ce que j'essaie de faire, c'est d'obtenir un modal à lancer uniquement sur mobile. Cela fonctionne bien avec l'ajout de la classe .visible-phone sur la div modale. 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 ne peux 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>

Au bas du html, j'ai mis jquery.js (en premier) et bootstrap.modal.js et bootstrap.transition.js. En fait, tous les modules bootstrap js (à ne pas manquer). Je n'ai pas d'expérience avec js ..

Veuillez me pardonner si j'ai posé un Q. vraiment stupide. Je n'ai pas trouvé la réponse à cette situation spécifique dans le journal.

Réponses:


219

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


oui, ça marche. Mais je n'ai pas la même animation que celle que nous avons en utilisant 'data-licenciement = "modal"'?
Chris

ok mon erreur. En fait, je ne me souviens pas du problème que j'avais à l'époque, je l'utilise maintenant et cela fonctionne parfaitement. TY!
Chris


6
C'est étrange, $('#myModal').modal('show')ça marche pour moi, mais pas cacher.
Charlotte

3
@LittleBigBot essayez d'utiliser à la $('#myModal').modal('toggle');place
Edson Horacio Junior

27

J'ai eu des problèmes pour fermer la boîte de dialogue modale bootstrap, si elle était ouverte avec:

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

J'ai résolu ce problème en ouvrant la boîte de 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"

Salut artjom. Thnx! Je vais l'exécuter et donner des commentaires. Vous n'utilisez pas un bouton pour ouvrir le modal? Car c'est ce que j'essaye de réaliser. Avoir un lancement modal dans un premier temps et uniquement sur mobile pour proposer un menu de navigation rapide vers l'emplacement (pas pertinent directement sur le bureau) c'est l'idée.
Monique De Haas

Oui data-ignore = "modal" data-target = "# myModal" a résolu mon problème! apprécier!
Dheeraj Thedijje

13

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

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

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

Jetez un oeil au travail codepen ici

Ou

Essayez ici


6

Essayez de spécifier exactement le modal que le bouton doit fermer avec data-target. Donc, votre bouton devrait ressembler à ce qui suit -

<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 de téléphone visible et testez-la sur le navigateur de votre PC au lieu du 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>

Salut @Simon Cunningham Tnx un million pour avoir répondu! J'ai mis dans la cible de données. Cela n'a pas fonctionné (malheureusement) Ensuite, j'ai supprimé la classe de téléphone visible. Cela n'a pas fait de différence. code <div class = "modal visible-phone" id = "myModal"> <div class = "modal-header"> <button class = "close" data-licenciement = "modal" data-target = "# myModal"> × </button> <h3> texte d'introduction <br> vous voulez accéder à ... </h3> </div> <div class = "modal-body"> <ul class = "nav"> <li> .. . liste de liens ici </li> <li> link2 </li> <li> link3 </li> </ul> </div> </div>code

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

Désolé pour le désordre du texte là-haut;) J'ai suivi vos conseils. Cela semble logique de donner au bouton de fermeture une cible de données exacte. Mais d'une manière ou d'une autre, je ne parviens toujours pas à le faire fonctionner. Même si vous désactivez le téléphone visible. Ne semble pas influencer le bouton de fermeture. (ce qui est plutôt une bonne chose)
Monique De Haas

Comment ouvrez-vous initialement votre modal? Essayez de l'ouvrir comme ci-dessous - <a data-toggle="modal" href="#myModal" class="btn"> Open modal </a>
Simon Cunningham

J'ai ajouté un code de démonstration réduit à ma réponse d'origine. Les fichiers javascript et css sont locaux dans mon projet de test, remplacez-les simplement par des liens vers les vôtres.
Simon Cunningham

6

Selon la documentaion, cacher / basculer 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

1
C'est en fait la bonne réponse "force brute" .. mais je suggère de la réécrire pour que l'animation soit correcte:$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){ $("body").removeClass( "modal-open" ); $(".modal-backdrop").remove(); });
DerDu

3

Essayez ceci.

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

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

1

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 en appuyant sur le bouton de fermeture.

J'ai découvert que la <button>balise 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>

Vérifiez l'exemple de code pour les modaux bootstrap sur: Page javascript BootStrap


0

Si vous avez peu de modaux affichés simultanément, vous pouvez spécifier le modal cible pour le bouton in-modal avec des attributs data-toggleet 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>

Quelque part 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 in-modal tant que ce bouton est masqué et qu'il fonctionne correctement avec l'option "modal"pour l'attribut data-toggle. Ce schéma fonctionne automatiquement!


0

Voici un extrait de code non seulement pour fermer les modaux sans actualisation de la page, mais en appuyant sur Entrée, il soumet le modal et se ferme sans actualisation

Je l'ai configuré sur mon site où je peux avoir plusieurs modaux et certains modaux traitent les données lors de la soumission et d'autres non. Ce que je fais, c'est 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, cette soumission effectue un traitement, c'est pourquoi j'ai ce jQuery pour ce modal. Maintenant, disons que j'ai un autre modal dans cette page Web mais aucun traitement n'est effectué et comme un modal est ouvert à la fois, j'en mets un autre $(document).ready()dans un script global php / js que toutes les pages obtiennent et je donne au bouton de fermeture du modal 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 (incluez 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');
                    }
                }
         });
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.