remmas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.modal {
display: none;
position: fixed;
z-index: 999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4)
}
.modal-content {
position: relative;
background-color: #EAE5E5;
margin: auto;
padding: 0;
border: 1px solid #444;
width: 33%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: .4s;
animation-name: animatetop;
animation-duration: .4s
}
.modal-content h2,
h3 {
font-weight: 400;
font-size: 14px;
line-height: 1.1
}
.modal-body-text {
color: #514f4f;
font-size: 14px;
text-align: center;
padding: 20px 16px
}
.contact {
max-width: 467px;
min-width: 320px
}
.contact * {
outline: none;
border: 0;
background: none
}
form fieldset {
display: block;
padding: 25px 30px
}
form .col-2 {
width: 100%
}
form .row:after {
content: '';
display: table;
clear: both
}
form section {
margin-bottom: 20px
}
form .input,
form .textarea,
form .radio,
form .checkbox,
form .button {
position: relative;
display: block
}
form .fa-append {
position: absolute;
top: 5px;
right: 5px;
width: 29px;
height: 29px;
padding-left: 3px;
border-left: 1px solid #e5e5e5;
font-size: 15px;
line-height: 29px;
text-align: center;
color: #ccc
}
form .input .fa-append+input,
form .textarea .fa-append+textarea {
padding-right: 46px
}
form .input input,
form .textarea textarea {
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
height: 50px;
padding: 10px;
outline: none;
border: 1px solid #e5e5e5;
border-radius: 0;
background: #fff;
font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
color: #404040;
appearance: normal;
-moz-appearance: none;
-webkit-appearance: none;
transition: border-color .3s;
-o-transition: border-color .3s;
-ms-transition: border-color .3s;
-moz-transition: border-color .3s;
-webkit-transition: border-color .3s
}
form .input:hover input,
form .textarea:hover textarea,
form .checkbox:hover i {
border-color: #00BDAB
}
form .input input:focus,
form .textarea textarea:focus,
form .checkbox input:focus+i {
border-color: #009688
}
form .button {
float: right;
height: 39px;
overflow: hidden;
margin-left: 20px;
padding: 0 20px;
outline: none;
border: 0;
background-color: #ff0202;
font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
cursor: pointer;
opacity: .8;
transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s
}
form .button:hover {
opacity: 1
}
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.modal-header {
padding: 2px 16px;
background-color: #EAE5E5;
color: #514f4f;
border-bottom: 1px solid #d2c7c7
}
.modal-body {
padding: 2px 8px
}
.modal-footer {
padding: 2px 8px;
background-color: #EAE5E5;
color: #514f4f;
border-top: 1px solid #d2c7c7;
padding: 10px 15px;
font-size: 8px;
text-align: center
}
.close {
color: #444;
float: right;
font-size: 28px;
font-weight: 700
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer
}
@media (max-width: 991px) {
.modal-content {
width: 85%
}
}
@media (max-width: 767px) {
.modal-content {
width: 50%
}
}
@media (max-width: 575px) {
.modal-content {
width: 75%
}
}
@media (max-width: 420px) {
.modal-content {
width: 95%
}
.modal-body {
padding: 0
}
.modal-footer,
.modal-content h2 {
font-size: 10px
}
}
@media screen and (max-width: 470px) {
.col,
.col-2 {
float: none !important;
width: 100% !important
}
}
.modal.open {
display: block;
}
</style>
<script>
document.addEventListener("click", ({
target
}) => {
let elem;
if (elem = target.closest("a.btn_modal")) myModal.classList.add("open");
if (elem = target.closest("#myModal .close") || target == myModal) myModal.classList.remove("open");
})
</script>
</head>
<body>
<a href="#" id="myBtn" class="btn_modal">Модальное окно</a>
<a href="#" id="myBtn1" class="btn_modal">Модальное окно</a>
<a href="#" id="myBtn2" class="btn_modal">Модальное окно</a>
<a href="#" id="myBtn3" class="btn_modal">Модальное окно</a>
<a href="#" id="myBtn4" class="btn_modal">Модальное окно</a>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header"> <span class="close">×</span>
<h2>Верх окна</h2>
</div>
<div class="modal-body">
Текст окна
</div>
<div class="modal-footer">Футер</div>
</div>
</div>
</body>
</html>