JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="https://raw.github.com/ericmmartin/simplemodal/master/src/jquery.simplemodal.js"></script>
<div id="modal_tutorial">
    
<iframe src="http://player.vimeo.com/video/64090686" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
    
    
    </div>

CSS

#modal_tutorial{padding:15px;display:none;background-color: #fff;color:#000;}

/* Overlay */
#simplemodal-overlay {background-color:#2e2e2e;}

/* Container */
#modal_container{ 
background-color:#fff;
height:434px;
width:439px;

-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 5px 5px 7px rgba(0,0,0,0.2);
}

JavaScript

jQuery(function ($) {

		$("#modal_tutorial").modal({
			overlayClose: true,
			opacity: 45,
			position: [98],
			onOpen: function (dialog) { 
				dialog.overlay.fadeIn(200, function () {
					dialog.data.show();
					dialog.container.fadeIn(200);
				});	
			},
			onClose: function (dialog) {					
				$.modal.close();
			}
		}); 

});