Skip to Content
All memories

Image modal in Bootstrap

 — #bootstrap#frontend

Create a link with an atribute pointing to the image source

<a class="popinstrukcija" href="#" slika="img/instrukcii.png">Instructions</a>

Create the actual modal window

<div
  class="modal fade"
  id="instrukcijamodal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="InstrukcijaModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered cel-ekran" data-dismiss="modal">
    <div class="modal-content border-mala">
      <div class="modal-body d-flex">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <div class="align-self-center d-flex align-items-center justify-items-center my-auto">
          <img src="" class="prikazislika" style="width: 100%;" />
        </div>
      </div>
    </div>
  </div>
</div>

Add the javascript before the closing of the tag

<script>
	$(function() {
	    $('[data-toggle="tooltip"]').tooltip()
	    $('[data-toggle="popover"]').popover()

	    $('.popinstrukcija').on('click', function() {
	        $('.prikazislika').attr('src', $(this).attr('slika'));
	        $('#instrukcijamodal').modal('show');
	    });
	});
</script>