2018年の更新-Bootstrap 4の使用
ほとんどの回答に不要なjQueryがたくさんあるようです。別のモーダルからモーダルを開くには、Bootstrapが提供するイベントなどを使用するだけで実行できますshow.bs.modal。また、CSSで背景オーバーレイを処理することもできます。ここに別のシナリオからの3つのオープンモーダルがあります...
別のモーダルからモーダルを開く（最初のモーダルを開いたままにする）
<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>
この場合の潜在的な問題は、2番目のモーダルの背景が1番目のモーダルを隠すことです。これを防ぐには、2番目をモーダルにしdata-backdrop="static"、CSSを追加して背景のz-indexを修正します...
/* 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
別のモーダルからモーダルを開く（最初のモーダルを閉じる）
これは上記のシナリオに似ていますが、2番目が開かれたときに1番目のモーダルが閉じられるため、背景CSS修正の必要はありません。2番目のshow.bs.modalモーダルイベントを処理する単純な関数は、1番目のモーダルを閉じます。
$("#myModal2").on('show.bs.modal', function (e) {
$("#myModal1").modal("hide");
});
https://www.codeply.com/go/ejaUJ4YANz
別のモーダル内でモーダルを開く
最後の複数モーダルのシナリオでは、1番目のモーダル内で2番目のモーダルを開きます。この場合、2番目のマークアップは1番目の中に配置されます。追加のCSSやjQueryは必要ありません。
<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