Shadowbox effect using Bootstrap Modal HTML Jquery CSS

Shadowbox effect using Bootstrap Modal HTML Jquery CSS

// The HTML Markup

<div class="container">
    <div class="row">
        <div class="col-sm-4 text-center">
            <a href="images/space.jpg" data-toggle="modal" data-target=".testing">
                <img  src="images/space-resized.jpg" alt="">
            </a>
        </div>
        <div class="col-sm-4 text-center">
            <a href="images/RudolphFriends.jpg" data-toggle="modal" data-target=".testing">
                <img  src="images/RudolphFriends-resized.jpg" alt="">
            </a>
        </div>
        <div class="col-sm-4 text-center" >
            <a href="images/october_omsk.jpg" data-toggle="modal" data-target=".testing">
            	<!-- Data target must match class of the modal below-->
                <img  src="images/october_omsk-resized.jpg" alt="">
            </a>
        </div>
    </div>
</div>

// The Modal Markup
// This can be placed anywhere as it will be hidden automatically
<div class="testing modal fade">
    <div class="modal-dialog modal-md">  
        <div class="modal-content">
            <img src="images/space.jpg" >
            <button class="btn" data-dismiss="modal" >Close</button>
        </div>
    </div> 
</div>


// The CSS
.modal-content img {
    max-width: 100%;
}

.modal-dialog {
    z-index: 1041; /* Fix the problem with the overlay appearing in front*/
    margin: 70px auto; /* Add some more spacing at the top */
}

// Generic button styling below
.modal-content button {
    position: absolute;
    bottom: -60px;
    background: #000;
    font-weight: bold;
    color: #fff;
}

.modal-content button:hover {
    background: #18bc9c;
}

// The JS
<script>
    $( document ).ready(function() {
        $('.testing').on('show.bs.modal', function (event) {
          var $link = $(event.relatedTarget), // the button that triggered the event
              $href = $link.attr('href'),
              $modal = $(this); // the modal that will be shown

          $modal.find('img').attr({
            src: $href
          });
        })
    });
</script>