Красивое появление модального окна всегда привлекает, если еще несет нужную информацию, что по эффекту здесь сделано просто чудесно. Оно по клику появится с левой стороны и если вам нужно закрыть, то жмем крестик и оно резко съезжает в правую сторону. Но не возможно посещаемый сайт или который реально сделан для пользователя, представить, что на этом ресурсе нот такого окна или похожего. Так как информацию можно в нем любую прописать и поставить кнопку с названием, что когда нужно вызвать его. Это могут быть как подсказки, которые написаны администрацией или стоять оператор, что будет выводить статистику, что сказать, это продолжение сайта, как в контейнере блок, только все по установке немного по другому, которая не слишком отличается от простого скрипта, который идет со стилями, что здесь в таком же плане.
Здесь безусловно красивый и неповторимый эффект появление его на портале, где стразу по сторонам идет затемнение, чтоб не сего не отвлекало. Его можно сделать под свой дизайн и выставить стиль на оттенок цвета. Если оно по умолчанию идет в светлой гамме, то выставляем в
CSS, что с ним идет темный цвет и уже в черном оттенке. Саму кнопку вызова можно ставить как в любой блог или в низ сайта и также вверх. Проверяя его на тестовом сайте и установив, все опишу подробно. Так как основном на такие окна установка идет не слишком сложная, просто читаем и ставим как написано, а точнее все разместил в низ сайта, чтоб можно было вызвать на любой странице.
Приступаем к установке: Ставил
в низ сайта между
head script и
css /head и выставляем скрипт со стилями.
Код
<script src="http://zornet.ru/zorner_ru_1/menu.min.js"></script>
<style>
.content {
text-align: center;
}
.modal-overlay {
background: rgba(60, 63, 78, 0.9);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
visibility: hidden;
}
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
pointer-events: none;
}
.modal {
background: #fff;
color: #666871;
text-align: center;
width: 400px;
max-width: 90%;
height: 250px;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
margin: auto;
padding: 40px;
pointer-events: auto;
font-weight: bold;
visibility: hidden;
}
@media screen and (max-width: 40em) {
.modal { height: 350px; }
}
.modal h2 {
font-size: 2.25em;
margin: 0.5em 0 0.25em;
color: #BDBFCA;
font-family: 'Lustria', 'Goudy Old Style', Garamond, 'Big Caslon', 'Times New Roman', serif;
}
/* Buttons */
.open-modal {
border: none;
margin: 3em 0 7em 0;
background: #7D87AE;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
padding: 1em 2em;
font-weight: bold;
border-radius: 40px;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.open-modal:hover {
background: #6d78a5;
}
.close-modal {
color: #aaa;
background: none;
position: absolute;
top: 10px;
right: 10px;
border: none;
width: 20px;
height: 20px;
line-height: 15px;
font-size: 22px;
font-weight: bold;
}
.close-modal:hover {
color: #666871;
}
</style>
Остаемся на месте и перед
/body устанавливаем, если
body нет, то ниже прописываем каркас с описанием.
Код
<div class="modal-overlay"></div>
<div class="modal-wrapper">
<div class="modal js-blur">
<button class="close-modal">×</button>
<h2>Это заголовок, что в выше идет</h2>
<p>Здесь будет описание, что автоматически будет выводить по центру, но если не делать в колонки или по другому формату</p>
<p>Администрация сайта ZORNET.Ru</p>
</div>
</div>
</div>
И там же остаемся и не куда не уходим и нам нужно найти
/body и если опять нет, то также продолжаем прописывать ниже.
Код
<script src="http://zornet.ru/zorner_ru_1/motionblur.js"></script>
<script src="http://zornet.ru/zorner_ru_1/modal.js"></script>
И осталось поставить кнопку вызова, устанавливаем там где нужно.
Код
<button class="open-modal">По клику появиться окно</button>
Все сохраняем и обновляем страницу и вызываем окно, и потом его можно редактировать по дизайн, чтили все идут открытые, что будет не сложно вывести оттенок или закруглить углы.
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
