91 votes

Monique De Haas avatar

Comment faire en sorte que la modale twitter bootstrap se ferme (après le lancement initial)

Demandé el 8 de Mai, 2012
Quand la question a-t-elle été
68659 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Ouvert
Situation réelle de la question

Je suis très noob, donc je pense que je suis en train de superviser quelque chose (probablement évident) avec twitter bootstrap modal. Ce que j'essaie de faire, c'est de faire en sorte qu'une modale ne se lance que sur le mobile. Cela fonctionne bien avec l'ajout de la classe .visible-phone sur la div modal. Jusqu'à présent, tout va bien. Mais ensuite, je veux que la modale fonctionne, c'est-à-dire que vous puissiez la fermer à l'aide du bouton X. Or, je n'arrive pas à faire fonctionner le bouton. Et je n'arrive pas à faire fonctionner ce 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>

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

Veuillez me pardonner si j'ai posé une question vraiment stupide. Je n'ai pas pu trouver la réponse à cette situation spécifique dans le journal.

Demandé el 8 de Mai, 2012 par Monique De Haas

Réponses

Trop de publicités?

219voto

ayal gelles avatar
ayal gelles Points 1399

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

Répondu el 30 de Novembre, 2012 par ayal gelles (1399 Points )

27voto

Artjom avatar
Artjom Points 889

J'ai eu des problèmes pour fermer la boîte de dialogue modale de bootstrap, si elle a été ouverte 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"
Répondu el 16 de Mai, 2012 par Artjom (889 Points )

13voto

shaunak1111 avatar
shaunak1111 Points 162

Ajouter la classe cacher 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>
Répondu el 12 de Août, 2013 par shaunak1111 (162 Points )

6voto

Simon Cunningham avatar
Simon Cunningham Points 3456

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

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

En outre, vous ne devriez avoir besoin que de bootstrap.modal.js, de sorte que vous pouvez supprimer les autres en toute sécurité.

Edit : si cela ne fonctionne pas, enlevez la classe visible-phone et testez-le 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="http://stackoverflow.com/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>
Répondu el 8 de Mai, 2012 par Simon Cunningham (3456 Points )

3voto

Theek avatar
Theek Points 11

Essayez ceci

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

$('.modal-backdrop').remove();
Répondu el 24 de Juin, 2013 par Theek (11 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X