Bootstrap ouvrir 2 les différentes boîtes de dialogue modales même page

J'ai une page où je veux lancer 2 différentes fenêtres modales. L'un pour la création de nouveaux utilisateurs et l'un pour l'édition utilisateurs existants.

Je montre que les utilisateurs existants dans un cliquables table et un lien vers mon modal #edit comme ceci:

<tr  data-id="<?php echo $value['id'];?>" data-toggle="modal" data-target="#edit" class="open-edit">

Ceci ouvre mon fichier d'amorce de dialogue modale:

<div class="modal fade" id="edit">
  <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> 
I ommited the rest of the code.. I grab this modal on its id="edit".

Cela fonctionne comme je veux, quand vous cliquez sur l'entrée de la table, la boîte de dialogue modale est ouvert avec un formulaire que j'ai créé.

Maintenant, j'ai créé une copie exacte de cette boîte de dialogue modale, seulement changé la id="edit" à id="create" et créé ce bouton:

<button class="btn btn-primary btn-me" data-toggle="modal" data-target="#create" >Create user<i class="fa fa-arrow-circle-right"></i></button>

Je pense que ce serait maintenant, il suffit d'ouvrir ma deuxième boîte de dialogue modale nommé #create, mais plutôt des blancs hors de l'écran, comme quand une boîte de dialogue modale montre - mais sans montrer aucune fenêtre modale/dialogue.

Quelqu'un peut-il m'aider à comprendre pourquoi c'est happending ou ce que je fais de mal?

OriginalL'auteur Bolli | 2014-06-16

  1. 2

    ce code ouvert 2 boîtes de dialogue modales dans la même page 

    <button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal2">modal2</button>
<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
    Qu'est-ce que la différence de ce code et le mien?
    J'ai trouvé que j'avais un groupe tag endroit étrangement, tout en essayant de placer mon modaux à l'intérieur de la vôtre. Après la suppression, il fonctionne! 🙂 Merci!
    C'est une bonne info... mais je me demandais si vous pouvez utiliser une classe au lieu d'un id pour l'un des auxiliaires modaux? J'ai plusieurs boutons permettant d'ouvrir un modal, et d'un <a> tag qui va s'ouvrir à l'autre. J'aimerais utiliser la classe sur les boutons, et les ID sur le <a> tag. Serait-ce de travailler avec votre code ci-dessus?
    vérifier le code html à l'intérieur de l'modal divs avec soin. j'ai eu une balise de fermeture </id> au lieu de </div> dans la première modal. et qui a travaillé quand il était le seul modal.. quand j'ai copier collé dans un deuxième modal, même après avoir changé les id et tout et tout, le premier modal toujours travaillé, mais le deuxième n'a pas. enfin, j'ai fixé la balise dans les deux divs et maintenant les deux modaux sont de travail.

    OriginalL'auteur WhiteLine