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">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
      </div>
    </div>
  </div>
</div>
Poniżej kod jQuery obsługujący kliknięcie.
$(function() {
	$('.pop').on('click', function() {
		$('.imagepreview').attr('src', $(this).attr('href'));
		$('#imagemodal').modal('show');  
		return false;
	});		
});

Komentarze 0

Dodaj komentarz