JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="overlay-block">
	<div class="overlay-tb">
		<div class="overlay-td">
			<div class="overlay-main">
				<div class="overlay-close">X</div>
				<h2>Обратный звонок</h2>
			</div>
		</div>
	</div>
</div>

CSS

.overlay-block {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
	background: rgba(0,0,0,.5);
	z-index: 999;
}

.overlay-tb {
	display: table;
	width: 100%;
	height: 100%;
}

.overlay-td {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}

.overlay-main {
	max-width: 340px;
  padding: 20px 30px;
	margin: 0 auto;
	background: #fff;
	position: relative;
	text-align: left;
}

.overlay-main h2 {
  text-align: center;
}

.overlay-close {
  position:absolute;
  right: 10px; top: 10px;
}

JavaScript

$('body').click(function(e) {
	if($(e.target).closest('.overlay-main').length==0) $('.overlay-block').fadeOut(200);
});

// Всплывающие окна
$('.popup').click(function(){
	var attr = $(this).attr('data-link');
	$('#'+attr).fadeIn();
	return false;
});