Mise à jour pour 2018 - Utilisation de Bootstrap 4
J'ai trouvé que la plupart des réponses semblent contenir beaucoup de jQuery inutiles. Pour ouvrir un modal à partir d'un autre modal peut être fait simplement en utilisant les événements fournis par Bootstrap tels que show.bs.modal. Vous voudrez peut-être également du CSS pour gérer les superpositions de fond. Voici les 3 modaux ouverts d'un autre scénario ...
Ouvrir le modal à partir d'un autre modal (garder le premier modal ouvert)
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div><div class="container"></div>
<div class="modal-body">
..
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
Un problème potentiel dans ce cas est que l'arrière-plan du 2ème modal cache le 1er modal. Pour éviter cela, créez le 2ème modal data-backdrop="static", et ajoutez du CSS pour corriger les z-index des arrière-plans ...
/* modal backdrop fix */
.modal:nth-of-type(even) {
z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1051 !important;
}
https://www.codeply.com/go/NiFzSCukVl
Ouvrir le modal depuis un autre modal (fermer le 1er modal)
Ceci est similaire au scénario ci-dessus, mais comme nous fermons le 1er modal lorsque le 2ème est ouvert, il n'est pas nécessaire de corriger le CSS de fond. Une fonction simple qui gère le 2ème show.bs.modalévénement modal ferme le 1er modal.
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
Ouvrir le modal dans un autre modal
Le dernier scénario modal multiple ouvre le 2ème modal à l'intérieur du 1er modal. Dans ce cas, le balisage pour le 2ème est placé à l'intérieur du 1er. Aucun CSS ou jQuery supplémentaire n'est nécessaire.
<div class="modal" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
</div>
</div>
</div>
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/iSbjqubiyn