web-dev-qa-db-fra.com

Bootstrap 3.0 Modal

Je suis coincé. Étant donné que Bootstrap 3.0 est sur le point de sortir, j'ai décidé de l'utiliser avec un nouveau projet. Les choses se passent bien pour l'instant, mais pour ma vie, je ne vois pas comment faire un dialogue modal dans Bootstrap 3.0.

Quelqu'un at-il un exemple simple?

twitter-bootstrapmodal-dialogtwitter-bootstrap-3
23
Eric

Vous pouvez essayer de construire les docs: Compiler Twitter bootstrap 3 docs (Comment)? ainsi aussi http://bassjobsen.weblogs.fm/explore-and-install-Twitter-bootstrap-3/ à partir de la documentation:

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

  <!-- 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">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </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 -->
54
Bass Jobsen

J'ai trouvé un très bon exemple qui vous permet également de télécharger un fichier Zip contenant tous les exemples de code concernant Booststrap 3 Modal.

J'espère que cela vous aidera aussi!

1
Joe

Je me suis battu contre le même problème et grâce à cette conversation, j'ai trouvé mon erreur. Lorsque vous utilisez TwitterBootstrap3, vous avez besoin des éléments suivants:

Un bouton déclencheur

<a data-toggle="modal"
   href="#myModal"
   class="btn btn-primary btn-lg"
>Launch demo modal</a>

Une div avec cette structure minimun:

<div class="modal fade"
     id="myModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- blah blah content here -->
       </div>
   </div>
</div>

Il est important de savoir que si vous ne placez pas de contenu modal-dialog et model-model, la fenêtre modale ne s'ouvrira pas correctement

0
mcarra66

Vous pouvez essayer simpleDialog ..__ Il s’agit d’un modal bootstrap simple avec options de rappel et d’injection de template.

0
Jithin Vijayan