JSFiddle - React, Tailwind, and code Playground
HTML
<div class="modal">
<div class="modal-inner">
<input type="text" value="Имя">
<input type="text" value="Телефон">
<input type="submit" value="Отправить">
</div>
</div>
<button>Заказать звонок</button>
CSS
body {
text-align: center;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
display: none;
margin: 0 auto;
margin-top: -100px;
margin-left: -175px;
width: 350px;
height: 200px;
background: #fff;
border: 3px solid #000;
border-radius: 3px;
font-size: 15px;
}
.modal-inner {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
padding-top: 30px;
}
.modal-inner input {
margin-bottom: 10px;
}
.modal-inner input[type=text] {
display: inline-block;
width: 300px;
height: 30px;
text-indent: 10px;
}
.modal-inner input[type=submit] {
display: inline-block;
margin-top: 10px;
width: 100px;
height: 25px;
cursor: pointer;
}
button {
margin-top: 50px;
padding: 0;
border: 0;
border-bottom: 1px dashed #000;
background: 0;
font-size: 22px;
cursor: pointer;
}
button:hover {
border-bottom: 1px dashed transparent;
}
#close {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background: #000;
color: #fff;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 30px;
}
#bg-close {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
JavaScript
$(document).ready(function() {
$('button').click(function() {
$('.modal')
.fadeIn(500)
.css('display', 'table');
$('<div id="close">X</div>').appendTo('.modal');
$('<div id="bg-close"></div>').appendTo('body');
$('#close').click(function() {
$('.modal')
.fadeOut(500)
$('#bg-close').css('display', 'none');
});
$('#bg-close').click(function() {
$(this).css('display', 'none');
$('.modal')
.fadeOut(500)
}); });});