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

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.

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

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"

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>

.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

$(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 -->

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>

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

Essayez ceci.

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

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

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

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!

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');
                    }
                }
         });
    });