ZorNet.Ru — сайт для вебмастера » Ajax модальное окно » Стильное окно jQuery для uCoz

Стильное окно jQuery для uCoz

Стильное окно jQuery для uCoz
Стильное модальное окно для uCoz. На некоторых сайтах подобное окно стоит не меньше 6-ти баксов за загрузку, но студия креативных решений для uCoz предлагает вам это окно абсолютно бесплатно. Уникальный дизайн модального окна для uCoz. Удивите ваших пользователей всплывающим окном с информацией о ближайшей скидке, новостью или уникальным предложением.

Установка в три этапа: CSS, HTML, jQuery. И так, начнём.

В CSS вставляем код

Код

.pop-window {
position:absolute;
visibility:hidden;
top:0;
left:0;
width:100%;
height:100%;
text-align:center
}
.pop-window:before {
content:"";
display:inline-block;
height:100%;
vertical-align:middle
}
.pop-window.show{visibility:visible}
.pop-window .pop-all-content {margin:5% 0;width:500px;min-height:100px;display:inline-block;vertical-align:middle;position:relative;text-align:left;background:#FFFFFF;border-radius:7px;box-shadow:0 0 10px 1px rgba(0,0,0,0.1)}
.pop-window .pop-all-content.animate-fade_scale {-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7);opacity:0;transition:all .3s linear}
.pop-window .pop-all-content.animate-fade_scale.show{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}
.pop-window .pop-all-content.animate-fade_right{-webkit-transform:translateX(20%);-moz-transform:translateX(20%);-ms-transform:translateX(20%);-o-transform:translateX(20%);transform:translateX(20%);opacity:0;transition:all .3s}
.pop-window .pop-all-content.animate-fade_right.show {-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);opacity:1}
.pop-window .pop-all-content.animate-fade_bottom {-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);-o-transform:translateY(20%);transform:translateY(20%);opacity:0;transition:all .3s}
.pop-window .pop-all-content.animate-fade_bottom.show {-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);opacity:1}
.pop-window .pop-all-content.animate-fall {-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);opacity:0;transition:all .3s;background:transparent;box-shadow:none}
.pop-window .pop-all-content.animate-fall.show {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1}
.pop-window .pop-header{position:relative;overflow:hidden;min-height:32px;border-radius:7px 7px 0 0}
.pop-window .pop-header.pop-noimage .pop-title{font-weight:700;font-size:14px;text-align:left;color:#fff;word-wrap:break-word;box-sizing:border-box;padding-top:14px;padding-left:16px}
.pop-window .pop-header.pop-image {background-repeat:no-repeat;background-position:0 0;background-size:100%;height:140px}
.pop-window .pop-header.pop-image .pop-title{font-weight:700;font-size:24px;text-shadow:0 0 20px #000;color:#fff;word-wrap:break-word;text-align:center;position:absolute;height:100%;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:0 60px;background-color:rgba(0,0,0,0.2)}
.pop-background {width:100%;height:100%;overflow:auto;position:fixed;top:0;left:0;background:rgba(0,0,0,0.4);opacity:0;transition:opacity .3s}
.pop-background.show{opacity:1}
.pop-background.show.animate-fall{background:#fff !important;opacity:0.995}


добавляем кнопку close
* хотя после полной установки скрипта окно будет само уплывать при клике в любом другом месте.
Код

.pop-window .pop-header a.pop-close {
background: url(/ваша кнопка.png);  
position:absolute;
right:11px;
top:11px;
width:21px;
height:21px;
cursor:pointer;
z-index:11000;
opacity:0.31
}
.pop-window .pop-header a.pop-close:hover{color:#333333;opacity:1}


следом оформляем содержание окна
Код

.pop-window .pop-content {padding:16px;font-size:13px;font-family:inherit}
.pop-window .pop-content h2,.pop-window .pop-content p{margin-bottom:16px}
.pop-window .pop-content *:last-child{margin-bottom:0}
.pop-window .pop-content h2 {font-size:18px;font-weight:bold;text-align:center;font-family:Bitter}
.pop-window .pop-content h1{font-size:24px;font-weight:bold;text-align:center;font-family:Bitter}
.pop-window .pop-content p {font-size:13px;line-height:22px}
.pop-window .pop-footer{padding:16px;background:#f7f7f7;border-radius:0 0 7px 7px}
.pop-window .pop-center{text-align:center}
.pop-window .pop-line{margin-bottom:16px}


туда же в CSS, после всего кода, ставим media для смартфонов
Код

@media screen and (max-width: 500px) {
.pop-window .pop-all-content{width:90%}
.pop-window .pop-header {
background-position:50% 0% !important;
background-size:cover !important }
}


На этом установка CSS закончена.

Переходим к HTML разметке. Установка абсолютно аналогичная всем другим окнам.

1. Кнопка вызова - ставим в любое место
Код
<a href="javascript://" onclick="add_orderserviceonline();" >Клацни здесь мышкой или ткни пальцем чтобы появилось нежное модальное окно</a>


2. Ниже кнопки или в любое другое место (можно вообще в футер сайта) ставим скрипт вызова окна, в котором сразу устанавливаем свою картинку для хидера.
Код

<script>function add_orderserviceonline() {$.popWindow('add', {background: 1,fixed: 1,hideClose: 0,fixScroll: 0,animate: 'fade_right',backgroundClose: 1,content: $('#order-service-online').html(),footer: 0,image: {url : 'ССЫЛКА НА НАШ БЭККГРАУНД в шапке окна',zoom: '100%',y: 'center',x: 'center',height: '155px'}});}</script>


3. Далее ставим сам блок с нашим содержимым (он же .pop-window .pop-content)
Код

<div id="order-service-online" style="display:none">
<H2></h2>
<p></p>
</div>

* за ненадобностью Вы в любой момент можете удалить <h2> и <p>

Ну и напоследок подключаем библиотеку jQuery Копируем ссылку и ставим в самый низ своего сайта.
Код
<script src="http://madeas.ru/js/nejnoe-okno.js"></script>


На этом всё! Если Вам понравился материал, не забудьте поделиться им, нажав одну из кнопок социальных сетей на страничке.
18 Ноября 2016 Загрузок: 6 Просмотров: 4328 Комментариев: (20)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 20
Kolinkor
Kolinkor 18 Ноября 2016 16:351
0
Что то это окно напоминает как на этом сайте, как гость зайдите и нажмите скачать и появится.
Kosten
Kosten 18 Ноября 2016 16:392
0
Есть такое, но точно скажу, что коды разные. Но во функциям они близки безусловно.
Сафрон
Сафрон 18 Ноября 2016 18:243
+1
Все правильно, а чем вообще отличается, Костен, как понимаю у тебя оригинал стоит, который продается, но есть еще от Вовчика рип, на это окно, что на сайте. А так не вижу не чего, чем бы это отличалось от рипа, тем что оно оригинальна.
Сафрон
Сафрон 18 Ноября 2016 18:264
0
Просто ставил вот это окно, оно меня устраивало, и все также показывает, сейчас их очень много сети модальных.
Kosten
Kosten 18 Ноября 2016 18:415
0
Да, оригинальное стоит, его можно купить здесь, а так под него описание на сайте.
Kosten
Kosten 18 Ноября 2016 18:436
0
Но есть модальные окна только на стилях, просто где код ставишь, это низ сайта, стили под него в CSS и вызов. Одно из окон вы можете посмотреть здесь, думаю оно самое распространенное.
ucozmental
ucozmental 18 Ноября 2016 18:467
0
Просто все сильно по установке намудрено, здесь если решать какое ставить, так думаю, то которое более понятное. А так само выполнено сказал бы отлично. но вы такой вид дизайн уже есть в сети.
ucozmental
ucozmental 18 Ноября 2016 18:488
0
Может кто подскажет, для чего "способ применение" не чего по факту не нашел.
Kosten
Kosten 18 Ноября 2016 18:589
0
Но здесь сам не могу разобраться, но видать автору виднее.
1 2 »
avatar