JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#portfolioModal1">Open Modal</button>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="gallery">
<!-- Project Details Go Here -->
<ul>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="img-responsive">
</li>
</ul>
</div>
<!--gallery1 end-->
</div>
<div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
<!--container end-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
JavaScript
$(document).ready(function () {
$('li img').on('click', function () {
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#myModalD').modal("show");
$('#myModalD').on('shown.bs.modal', function () {
$('#myModalD .modal-body').html(img);
});
$('#myModalD').on('hidden.bs.modal', function () {
$('#myModalD .modal-body').html('');
});
});
})