jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#cls_ctnr {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
z-index: 99;
transform: scale(0);
transition: opacity 1s, transform 0s 1s;
opacity: 0;
}
#cls_ctnr.open{
transform: scale(1);
transition: opacity 1s, transform 0s 0s;
opacity: 1;
}
#cls_ctnr::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: "";
}
#cls_pop {
padding: 40px 10px 10px;
min-height: 200px;
max-width: 450px;
display: inline-block;
vertical-align: middle;
position: relative;
text-align: center;
background: #b2c494;
color: #fff;
}
#cls_pop h4 {
margin: 0;
text-align: center;
font-size: 21px;
color: darkblue;
}
.cls_close {
display: block;
position: absolute;
background: #6700ff;
top: -15px;
right: -15px;
margin-left: -25px;
line-height: 30px;
font-weight: bold;
width: 30px;
height: 30px;
text-align: center;
color: #fff;
cursor: pointer;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.cls_close:hover {
background: #eaade7;
color: #000;
}
.btn_open {background-color: slateblue}
</style>
</head>
<body>
<button id="openformeven" type="button" class="btn_open" onclick="document.getElementById('cls_ctnr').classList.add('open')" >ОТКРЫТЬ</button>
<div id="cls_ctnr">
<div id="cls_pop">
<span class="cls_close" onclick="document.getElementById('cls_ctnr').classList.remove('open')">☰</span>
<h4>Заголовок</h4>
Пример модального окна.
</div>
</div>
</body>
</html>