JSFiddle - React, Tailwind, and code Playground

by jme11

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <a href="#" class="pop" data-title="Angry Bird" data-desc="This is a happy blue Angry Bird" data-source="<strong>Source</strong> Angry Bird Iconset">
                <img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" class="img-responsive" />
            </a>
        </div>
        <div class="col-xs-6">
            <a href="#" class="pop" data-title="Turkish Van Cat" data-desc="The Turkish Van is a semi-long-haired breed of domestic cat, which was developed in the United Kingdom from a selection of cats obtained from various cities of modern Turkey, especially Southeast Turkey." data-source="<strong>Source</strong> Wikipedia">
                <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" class="img-responsive" />
            </a>
        </div>  
    </div>
</div>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" data-dismiss="modal">
        <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>
                <div class="text-center img">
                    <img src="" class="img-responsive imagepreview" />
                </div>
                <div class="img-description">
                    <p class="text-left title"></p>
                    <p class="text-left desc"></p>
                    <p class="text-left source"></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.modal-dialog {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.modal-content, .modal-body {
  height: 100%;
  overflow: hidden;
}
.img-description {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
}
.title {
  font-weight: bold;
  font-size: 1.2em;
}
.img {
  height: 80%;
}
.imagepreview {
  max-height: 100%;
  display: inline-block;
}

JavaScript

$(function () {
    $('.pop').on('click', function () {
        var title = $(this).data('title');
        var desc = $(this).data('desc');
        var source = $(this).data('source');
        $('.title').text(title);
        $('.desc').text(desc);
        $('.source').html(source);
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');
    });
});