bootstrap: plus d'un modal

Je suis l'aide de deux bootstrap des modaux sur mon site:

       <!---- modal 1 ---->
       <div id="send-pm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="send-pm" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Send Foobar a PM</h3>
          </div>
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button class="btn btn-primary">Send</button>
        </div>

        <!---- modal 2 --->
        <div id="post-comment" class="modal hide fade" tabindex="-2" role="dialog" aria-labelledby="post-comment" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Post a Comment</h3>
          </div>
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Post</button>
        </div>

Ils sont déclenchés par:

<a href="#send-pm" data-toggle="modal" class="btn btn-small"> Send PM </a>
<a href="#post-comment" data-toggle="modal" class="btn btn-small"> Post Comment </a>

Cependant, seule la première personne se montre. Mon second post-comment ne s'affiche pas. Il n'y a pas JS erreurs sur console.

Des suggestions?

Bootstrap ne prend pas en charge modale-sur-modale de l'empilement. Si vous voulez des fonctionnalités comme cela, vous aurez besoin de l'utilisation d'une autre bibliothèque.
Vous êtes manquant de peu la fermeture de divs. La raison PSCoders réponse œuvres est parce qu'il se termine correctement le modal div. Si vous venez de réparer votre fermeture de div pour le modal-footer il fonctionne très bien. jsfiddle.net/jesus_tesh/jS9Vt/1
Est Votre problème résolu?

OriginalL'auteur Jannis | 2013-05-02

  1. 11

    De faire à la fois de leur travail. Il suffit de les placer dans des contenants distincts au lieu d'un après l'autre.

    Démo

    <a href="#send-pm" data-toggle="modal" class="btn btn-small"> Send PM </a>
<a href="#post-comment" data-toggle="modal" class="btn btn-small"> Post Comment </a>
<div>
<!---- modal 2 --->
<div id="post-comment" class="modal hide fade" tabindex="-2" role="dialog" aria-labelledby="post-comment" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Post a Comment</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Post</button>
</div>
</div>
<div>
<!---- modal 1 ---->
<div id="send-pm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="send-pm" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Send Foobar a PM</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary">Send</button>
</div>
</div>

    OriginalL'auteur PSL