JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-xs-4"><button class="btn btn-primary" data-modal="true" data-modal-content="showvideo">Video</button></div>
		<div class="col-xs-4"><button class="btn btn-primary" data-modal="true" data-modal-content="showtext">Text</button></div>
		<div class="col-xs-4"><button class="btn btn-primary" data-modal="true" data-modal-content="showimage">Image</button></div>
	</div>
</div>


  <!-- Modal -->
  <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-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title hidden">Modal title</h4>
        </div>
        <div class="modal-body">
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-di -->
    
<div id="showvideo-content" class="hidden">
  <iframe width="100%" height="315" src="//www.youtube.com/embed/_Wo9JxLIQYg" frameborder="0" allowfullscreen></iframe>
</div>
<div id="showtext-content" class="hidden">
  Praesent vitae lorem lectus. Praesent ut lectus id ipsum cursus rutrum sit amet eu elit. In accumsan pulvinar nisl euismod condimentum. Integer consequat, velit rhoncus vestibulum vehicula, turpis dolor euismod velit, eu volutpat eros ligula non ligula. Quisque non cursus nulla, eu viverra sem. Mauris dapibus id nulla...

JavaScript

$(document).on('click', 'button[data-modal=true]', function(){
		var modalDataID = $(this).data('modalContent');
    //$('#myModal .modal-title').html('Video');
    var modalHtml = $('#' + modalDataID + '-content');
    var modalData = modalHtml ? modalHtml.html() : 'No content';
		$('#myModal .modal-body').html(modalData);
		$('#myModal').modal('show');
		});
	
$('#myModal').on('hidden.bs.modal', function () {
  $('#myModal .modal-body').html('');
});