» »

Светлое ajax окно Gretymba для ucoz


Светлое ajax окно Gretymba для ucoz

Это стильное а также светлое ajax окно Gretymba, которое безусловно подойдет как на любой сайт и не исключаю тематику. Оно сделано так, что вы можете его отредактировать под себя или ресурс, что говорит о том, на любую функцию оно подойдет. Работа заключается в том, что по клику оно появляется, а вот что в нем будет, это зависит только от вас.

Просто можно написать какую то новость, или сделать небольшой мануал или описать свой интернет ресурс. Также не нужно забывать, что в него можно поставить скрипт, но к примеру, если у вас имеется социальные закладки и по ним сделать регистрацию. Что сказать, обширно по теме и только от вас зависит, где вы его применять будете.

Оно может быть таким, так как все меняется в стилях, и само изображение можете увеличить.



Установка:

Прежде всего для начало пропищим в CSS стили.

Код
.webo4ka-bg-body {background: rgba(0,0,0,0.7); width:100%; height:100%; position:fixed; left: 0px; top: 0px; z-index:999; display:none;}  
.webo4ka-okno {background:#fff; position:fixed; top:20%; left:30%; z-index:1000; width:500px; height:auto; border-radius:7px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;}  
.webo4ka-fon {background: url(http://zornet.ru/SKRIPT/dsar/trend/2013_frozen-wide.jpg) 0px 0px no-repeat; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:500px; height:230px;}  
.webo4ka-close {background: url(http://zornet.ru/SKRIPT/dsar/trend/gtk-close.png) 0px 0px no-repeat; width:24px; height:24px; float:right; margin:10px 10px 0 0; opacity: 0.5;}  
.webo4ka-close:hover {opacity: 1.0; cursor:pointer;}  
.webo4ka-body {background:#fff; width:500px; height:auto;}  
.webo4ka-body div {padding:20px 20px; text-align:justify; line-height:1.8;}  
.webo4ka-foother {background:#f3f3f3; width:460px; height:auto; padding:20px; border-bottom-left-radius:7px; border-bottom-right-radius:7px; text-align:center;}  
.webo4ka-zakrit {background: #1F5B88; border-radius:20px; color:#fff; font-size:14px;top: 40px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding:8px 30px; opacity: 0.8;}  
.webo4ka-zakrit:hover {opacity: 1.0;}


Потом основу корпуса нам нужно поставить, в моем случай прописал в низ сайт и нормально появляется.

Код
<div class="webo4ka-bg-body"></div>  
<div class="webo4ka-okno">  
<div class="webo4ka-fon"><a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="webo4ka-close"></div></a></div>  
<div class="webo4ka-body"><div>Здесь пишем что вам нужно а также ставим ссылки. можете прописать скрипт или форму входа по социальным закладкам. Вообщем окно сделано красиво и в правом ввернем углу имеет крестик, который еле заметен, чтоб не портить картинку и здесь все продумали. На сайте zornet.ru если гость скачивает, то там появляется по дизайн почти такое окно, но код совершенно другой.</div></div>  
<div class="webo4ka-foother"><a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);" style="text-decoration:none; outline:none;"><span class="webo4ka-zakrit">Закрыть</span></a></div>  
</div>


Но и ставим выход его, это там где вам нужно или посчитаете нужным.

Код
<a href="javascript://" onclick="$('.webo4ka-okno, .webo4ka-bg-body').fadeToggle(1000);">Открыть</a>


Вот такое необычное по своей стилистике можете разместить у себя.

Источник: http://webo4ka.ru/
17.02.2016 Просмотров: 689 Комментарий: (18)

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

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

Комментарий: 18
tsakonter
tsakonter 17.02.2016 22:471
0
Просто великолепное окно сделано по своему дизайну, теперь сайт веб матер юкоз задает моду на стили и на дизайн. Но мне бы то которое здесь стоит, но как понимаю, оно было куплено.
Kosten
Kosten 17.02.2016 22:572
0
Да нормально сделано, но у меня на сайте оригинальное стоит, которое вы также можете приобрести здесь, так как с ним идет и сама регистрация, как заметили. Если кто не видел, просто выйдите сайта и как гость зайдите и попробуйте скачать и все поймете. И вы поймете еще по этому материалу, что оно не только идет на клик а можно сделать как на скачивание, что лучше безусловно для меня в приоритете оригинал. Но про это не чего худого не могу сказать, на тестовом сайте ставил и работает нормально.

AnTron
AnTron 17.02.2016 23:156
0
Минус, если можно менять крестик, то будет темный фон и не кто не увидеть как выключить и будут перезагружать.
Сопрано
Сопрано 17.02.2016 23:033
0
Но это же модальное окно, так их называют, и раньше редко было увидит на сайте, сейчас их ставят, так как отличная поддержка как по информации и функциональности. Но вот больше мне нравиться, самая первая кнопка, это uID вход на сайт, что в первые вижу, так как можно другие отдельно выставить, кроме ее только.
Maryges
Maryges 17.02.2016 23:074
0
С отчетом отлично сделано и главное важно, просто сейчас основном все коды открыты и не кто уже не начинает пользователей, так как чем больше их, тем на сайте тишина. Они просто заходят, только чтоб скопировать и скачать. А здесь если с каждого по пол минуты брать, вы в статистике сразу заметите, что у вас намного время поднимется, что проводит пользователь или как там считают, вообщем на сайте.
AnTron
AnTron 17.02.2016 23:145
0
Есть всякие модальные окна, но такое в первые вижу, но не в этом суть. Просто чтоб поиски не приняли за сплывающие рекламу его, но по идее не должно, так как если только написано будет или скрипт какой то онлайн расположен в нем. Но также не удивлюсь, что его скоро можно увидеть на скачивание, но только там не регистрация будет, а реклама, чтоб кликнули и можете скачивать, вот точно с таким гугл борется.
Сафрон
Сафрон 17.02.2016 23:347
0
Явно пригодиться, не когда что то не задумывался ставить и не думал, вообще зачем оно. А так посмотрел, много можно через это окно вывести нужного.
avatar
a-(c) 18.02.2016 16:258
0
Кроме низа сайта коду можно вставить: ? т.к несколько даже много окон надо!!!
Kosten
Kosten 18.02.2016 16:419
0
Зачем много, в низ сайта можно поставить, так как он на всех страницах, основном на главную выводят.
avatar
a-(c) 18.02.2016 20:4110
0
ВНИЗ 8 ОКОНО?? 8 КОДОВ?
Kosten
Kosten 18.02.2016 20:4311
0
Восемь окон, и что вы с ними будете делать, но это реально много.
avatar
a-(c) 18.02.2016 20:4612
0
ну надо так.
dry dry dry dry
avatar
a-(c) 18.02.2016 20:4613
0
Восемь кодов верно:?DDDD
avatar
a-(c) 18.02.2016 21:2214
0
с восьми кодами? biggrin
1 2 »
avatar