Bootstrap 3を使用すると、Bootstrap の組み込みModal コンポーネントだけを使用して、追加のプラグインなしで動作させることができました。
次のような<img>
空のタグを使用して、HTML ページにモーダルを追加します。src
<!-- Photo Modal -->
<div class="modal fade" id="photo-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<img src="" />
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
次のようなリンク内にサムネイル画像があるとします。
<a class="thumbnail" data-imgpath="pathToImage" data-toggle="modal" href="#">
<img alt="PhotoName" src="pathToImage">
</a>
次の jQuery コードを使用して、モーダル内にサムネイル画像をフル サイズで表示します。
$(function()
{
$('a.thumbnail').click(function(e)
{
e.preventDefault();
var imgPath = $(this).data('imgpath');
$('#photo-modal img').attr('src', imgPath);
$("#photo-modal").modal('show');
});
$('img').on('click', function()
{
$("#photo-modal").modal('hide')
});
});
次の CSS を追加して、画像を中央に配置します<div class="modal-dialog">
。
#photo-modal .modal-dialog
{
text-align:center;
display:table;
padding: 0;
margin-top: 30px;
}
パルメリオから取られて適応されたアイデア -モーダル画像