JSFiddle - React, Tailwind, and code Playground

by Keith Chu

HTML

<script src="https://cdn.rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button id="js-modal-1">Open Modal 1</button>
<button id="js-modal-2">Open Modal 2</button>

<div id='modal' class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <button class="close" data-dismiss="modal" type="button">x</button>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

SCSS

.modal-body {
  img {
    display: block;
    height: 400px;
    margin: 0 auto;
    max-width: 100%;
    width: 400px;
  }
}

CoffeeScript

$('#js-modal-1').on 'click', -> loadModal1()
$('#js-modal-2').on 'click', -> loadModal2()

$data1 = '''
	<picture>
  	<!--[if IE 9]><video style="display: none;"><![endif]-->
  	<source srcset="http://f.cl.ly/items/001v2f323q1O260S161O/large-1.jpg" media="(min-width: 600px)">
    <source srcset="http://f.cl.ly/items/0q3b2N2H3T3Q1p322R1o/medium-1.jpg" media="(min-width: 400px)">
    <source srcset="http://f.cl.ly/items/2O063v0S2t3D0N220D3F/small-1.jpg" media="(max-width: 399px)">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="http://f.cl.ly/items/0q3b2N2H3T3Q1p322R1o/medium-1.jpg" alt="image 1" />
  </picture>
'''
$data2 = '''
	<picture>
  	<!--[if IE 9]><video style="display: none;"><![endif]-->
  	<source srcset="http://f.cl.ly/items/2B3N1e0Y111m0H1y3q2d/large-2.jpg" media="(min-width: 600px)">
    <source srcset="http://f.cl.ly/items/0X1D2F0R2w0Y0f2G2P0y/medium-2.jpg" media="(min-width: 400px)">
    <source srcset="http://f.cl.ly/items/3g282z2P1X180Y44373a/small-2.jpg" media="(max-width: 399px)">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="http://f.cl.ly/items/0X1D2F0R2w0Y0f2G2P0y/medium-2.jpg" alt="image 2" />
  </picture>
'''

loadModal1 = ->
  $modal = $('#modal')
  $modal.find('.modal-body').html($data1)
  $modal.modal()

loadModal2 = ->
  $modal = $('#modal')
  $modal.find('.modal-body').html($data2)
  $modal.modal()