Podgląd zdjęcia w popupie w Bootstrap
Poniżej pokażę kod do stworzenia prostego podglądu zdjęcia w popupie po kliknięciu na link. Poniżej przykładowe linki do zdjęć oraz kod html popupa. Po kliknięciu na taki link chcemy aby pojawił się popup.
<a href="/link_do_zdj" class="pop"> Kliknij aby zobaczyć zdjęcie </a> <a href="/link_do_zdj" class="pop"> Kliknij aby zobaczyć zdjęcie </a> <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <img src="" class="imagepreview" style="width: 100%;" > </div> </div> </div> </div>
$(function() { $('.pop').on('click', function() { $('.imagepreview').attr('src', $(this).attr('href')); $('#imagemodal').modal('show'); return false; }); });