JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<div id="shadow"></div>
<div id="window">
<div id="close"></div>
</div>
<a href="#" id="url">Открыть окно</a>
</body>

CSS

#shadow { 
background: black;
height: 100%;
opacity: 0.8;
position: fixed;
width: 100%;
z-index: 50;
display:none;
top:0;
left:0;
}

#window{
position:fixed;
left:50%;
top:50%;
width:800px;
height:500px;
margin-left:-400px;
margin-top:-250px;
border:1px solid black;
display:none;
background:white;
z-index:99;
box-shadow: 0px 0px 10px #000000;
}

#close{ 
background: url("closebox.png") 50% 50% no-repeat transparent;
border: medium none currentColor;
height: 30px;
position: absolute;
right: -15px;
top: -15px;
width: 30px;
}

JavaScript

$(document).ready(function(){

$('#close').click(function() {
$('#shadow').hide();
$('#window').hide();
});

$('#url').click(function() {
$('#shadow').show();
$('#window').slideToggle(500);
});

})