torrcatalog, вот можете это модальное окно задействовать, так как идет под одной палитрой цвета, это светлый оттенок, который по эффекту появляется нормально. Который был проверен на работоспособность, что все отлично по функционалу работает.
Установка:
По месту HTML:
Код
<h1 style="text-align: center; margin-top: 20px; margin-bottom: 20px;">Модальное окно на чистом CSS</h1>
<div class="container">
<div style="text-align: center;">
<a href="#openmazabun_kuverun">Открыть модальное окно</a>
</div>
<div id="openmazabun_kuverun" class="mazabun_kuverun">
<div class="mazabun_kuverun-dialog">
<div class="mazabun_kuverun-content">
<div class="mazabun_kuverun-header">
<h3 class="mazabun_kuverun-title">ZORNET.RU</h3>
<a href="#close" title="Close" class="close">×</a>
</div>
<div class="mazabun_kuverun-body">
Полное отстранение Valve от самой концепции насыщения контента на любом значащем уровне отбрасывает ворота на мошенничество и жестокое обращение. Но эй. Это поможет компании принять более жесткие решения.
</div>
</div>
</div>
</div>
</div>
JavaScript - где в низ сайта можно прописать, чтоб на всех страницах окно показывалось.
Код
<script>
document.addEventListener("DOMContentLoaded", function () {
var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
console.log(scrollbar);
document.querySelector('[href="#openmazabun_kuverun"]').addEventListener('click', function () {
document.body.style.overflow = 'hidden';
document.querySelector('#openmazabun_kuverun').style.marginLeft = scrollbar;
});
document.querySelector('[href="#close"]').addEventListener('click', function () {
document.body.style.overflow = 'visible';
document.querySelector('#openmazabun_kuverun').style.marginLeft = '0px';
});
});
</script>
CSS
Код
/* свойства модального окна по умолчанию */
.mazabun_kuverun {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
}
/* при отображении модального окно */
.mazabun_kuverun:target {
opacity: 1;
pointer-events: auto;
overflow-y: auto;
}
/* ширина модального окна и его отступы от экрана */
.mazabun_kuverun-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.mazabun_kuverun-dialog {
max-width: 500px;
margin: 30px auto;
}
}
/* свойства для блока, содержащего контент модального окна */
.mazabun_kuverun-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.mazabun_kuverun-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
}
/* свойства для заголовка модального окна */
.mazabun_kuverun-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.mazabun_kuverun-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.mazabun_kuverun-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}
Форма и дизайн можно изменить с стилях CSS.
Демонстрация
