Bootstrap modal image

Open image at full size with a simply click-closeable modal

by fstarred

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-xs-4">
  <a href="#" class="pop">
    <img class="img-responsive center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f4/Daffy_Duck.svg/718px-Daffy_Duck.svg.png" alt="Windows Log Analyzer">
  </a>
</div>

<!-- popup for displaying images at full size -->
<div class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog" data-dismiss="modal">
    <div class="modal-content">
      <img src="" class="imagepreview">
    </div>
  </div>
</div>

JavaScript

$(function() {
  $('.pop').on('click', function(e) {
    e.preventDefault(); // avoid scrolling on top of the page
    $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    $('#imagemodal').modal('show');
  });
});