JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="basic-modal-content">
<h1>HELLO WORLD</h1>
</div>
<script type="text/javascript" src="http://vignesh.gvignesh.org/test/sample_modal/jquery.simplemodal.js"></script>
</body>
CSS
#basic-modal-content {
display:none;
}
/* Overlay */
#simplemodal-overlay {
background-color:#000;
cursor:wait;
}
/* Container */
#simplemodal-container {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color:#bbb;
background-color:#FFF;
border:6px solid #72A014;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
padding:12px;
}
#simplemodal-container .simplemodal-data {
padding:8px;
}
#simplemodal-container code {
background:#141414;
border-left:3px solid #65B43D;
color:#bbb;
display:block;
font-size:12px;
margin-bottom:12px;
padding:4px 6px 6px;
}
#simplemodal-container a {
color:#ddd;
}
#simplemodal-container a.modalCloseImg {
background:url(close.png) no-repeat;
width:40px;
height:40px;
display:inline;
z-index:3200;
position:absolute;
top:-20px;
right:-23px;
cursor:pointer;
}
#simplemodal-container h3 {
color:#84b8d9;
}
JavaScript
$(document).ready(function () {
$.modal($("#basic-modal-content"));
var modal = $("#simplemodal-container");
var wid = $(this).height();
var mwid = $("#simplemodal-container").height();
//alert("Window: " + wid + " Modal: " + mwid);
$(window).resize(function () {
var w = modal.width(),
h = modal.height();
//Code resizing of modal here
modal.css({
width: w + ($(window).width() - w),
height: h + ($(window).height() - h)
});
});
});
setTimeout(function () {
$.modal.close();
}, 15000);