>
Дата и время публикации : 18 Марта 17 в 09:41 | Раздел : Прочее для uCoz
Параметр | Значение |
---|---|
Дата публик. | 18 Марта 17, Суббота, 09:41 |
Адапт. дизайн | |
Обновления | Не производились |
Просмотрен | 751 |
Сейчас довольно трудно представить себе сайт, где были бы не нужны модальные окна. Пользовательские диалоги, отправка и приём данных, уведомления, предупреждения, подсказки — всё это может появляться в виде всплывающих окон на самых разных сайтах, от развлекательных до корпоративных.
Используя представленные в нашей коллекции скрипты, вы сможете без лишней нагрузки организовать работу вплывающих окон на своём сайте. Простое, и в тоже время необычное модальное окно с помощью элементов SVG. Данный тип веб-графики очень стремительно набирает обороты, а современные технологии помогают делать потрясающие вещи. Модальное окно с эффектом при появлении. Поддержка IE9+
1) Между <head> и </head>
<script src="http://7uarts.ucoz.org/load1/modal_win/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>
2) Код окна в нижнюю часть сайта перед </body> вставляете код меню:
<div class="modal-overlay"></div>
<div class="modal-wrapper">
<div class="modal js-blur">
<button class="close-modal">×</button>
<h2>uCoz Web Services</h2>
<p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</p>
<p>Владелец сервиса — ООО «Юкоз Медиа», Россия.</p>
</div>
</div>
</div>
3) Там же в нижней части сайта перед </body> вставляете код:
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияЛазил на просторах магазина Themeforest и в одном из премиум-шаблонов понравился прелоадер. Решил что должен его забрать от туда, ведь на сайт...