Ouvrir plusieurs boîtes de dialogue modales à l'intérieur d'une page avec Twitter Bootstrap

Je veux ouvrir plusieurs boîtes de dialogue à l'aide de Twitter Bootstrap 3.

Comment puis-je le faire? Peut-il être fait?

Expliquer votre question dans le détail.Ce que vous avez essayé?
Je n'ai pas trouvé de référence à ce sujet, j'ai donc tourné vers.
Voulez-vous ouvrir plusieurs modale lorsque vous cliquez sur un seul bouton?
Nope j'ai crée dynamiquement une liste de liens.
Alors quel est le problème? vous pouvez créer plusieurs modal avec différents identifiants et la joindre à vos liens dynamiques.

OriginalL'auteur IamStalker | 2013-09-22

  1. 4

    D'abord créer des auxiliaires modaux qui vous voulez comme ç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 -->

    Puis, à partir de votre lien dynamique commutateur à votre modale à l'aide de l'id de lien href. Sinon utiliser onclick javascript événement.

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

    Ou (ce qui suit est la meilleure option pour vous)

    <a href="javascript:void(null);" class="btn btn-primary btn-lg" onclick="launch_modal('your_id');">Launch Modal</a>

    Et à partir de javascript,

    <script>
  function launch_modal(id) {
     //Hide all modals using class if required.
     $('.modal').modal('hide');
     $('#'+id).modal('show');
  }
</script>

    OriginalL'auteur devo

  2. 0

    une autre façon est d'avoir un ce html:

    <div class="modal fade" id="modal" 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" title="Close">&times;</button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    Et de nombreux jquery comme cela pour ajouter du contenu:

    $('#modal .modal-header .modal-title').html('<strong>:)</strong> Success!');
$('#modal .modal-body').html('<p>Something success!.</p>');
$('#modal .modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal" title="Close">Close</button>');
$('#modal').modal('show');

    OriginalL'auteur Undefined Behavior