私が同じことを必要としていて、既存の答えが満足のいくものではなかったという理由だけで:ブートストラップだけで良い方法があります。私はこの機能を持っています:
function image(id, img, text) {
return text + "<div id='" + id + "' class='modal fade' tabindex='-1' role='dialog'>"
+ "<div class='modal-dialog'><div class='modal-content'><div class='modal-body'>"
+ "<img src='" + img + "' class='img-responsive'></div></div></div></div>"
+ "<div class='col-xs-4 col-md-4 text-right'><a class='thumbnail' href='#' data-toggle='modal' data-target='#" + id + "'>"
+ "<img src='" + img + "'/></a></div>"
}
これにより、次のようなHTMLが生成されます。
<div id="tea-live" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="images/tea-live.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-md-4 text-right">
<a class="thumbnail" href="#" data-toggle="modal" data-target="#tea-live">
<img src="images/tea-live.png">
</a>
</div>
これにより、同じページにモデルボックスのフェードインが作成されます。