Красивое окно для сайтов uCoz by webo4ka.ru


Красивое окно для сайтов uCoz by webo4ka.ru

529
10 из 10
Проголосовало: 9






Всем привет. Представляю вашему вниманию красивое окошко, красивым плавным появлением и затемнением фона при открытии окна. Окно очень простенькое, картинку в фоне можно поменять на любую другую и окно может принять абсолютно другой вид... Ну вот и все, переходим к установке.

Установка:

1. Кнопка вызова окна, HTML-код:

Код

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


2. Само окно, HTML-код:

Код

<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>Webo4ka.ru - Лучший БЕСПОЛЕЗНЯК для uCoz. Все материалы принадлежат их создателям, при перепечатке ссылка на первоисточник обязательна. Наш сайт предназначен для web-мастеров специализирующихся на системе uCoz. У нас можно найти шаблоны для uCoz, скрипты для uCoz и многое другое для создания качественного и красивого сайта. Администрация данного сайта не несёт ответственности за весь материал, который у нас опубликован.</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>


3. И стили, CSS-код:

Код

<style>  
  .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://webo4ka.ru/wDemo/w4/image.jpg) 0px 0px no-repeat; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:500px; height:140px;}  
  .webo4ka-close {background: url(http://webo4ka.ru/wDemo/w4/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:#6bb933; 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;}  
  </style>


на этом всё...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 14

ДабстэпшникZVT
0
ДабстэпшникZVT написал: Написано 25 Февраля 2016 в 18:41
Комментарий №13
Посоветуйте, как его установить? Можно ли его в Информер пихнуть?

Вовчик
0
Вовчик написал: Написано 25 Февраля 2016 в 18:43
Комментарий №14
попробуй

YaVi
0
YaVi написал: Написано 15 Февраля 2016 в 11:48
Комментарий №12
Хорошая вещь, многим пригодится)

na3uTuB4uk94
0
na3uTuB4uk94 написал: Написано 15 Февраля 2016 в 07:37
Комментарий №11
Скачайте Яндекс браузер, никаких проблем не будет)

Roman_Domnin
0
Roman_Domnin написал: Написано 14 Февраля 2016 в 19:34
Комментарий №3
Пропиши кодировку страницы, а то кракозябры какие-то получаются http://f2.s.qip.ru/19yBhtcbH.png

Вовчик
0
Вовчик написал: Написано 14 Февраля 2016 в 22:02
Комментарий №4
я скрин делал со страницы демо...

Roman_Domnin
0
Roman_Domnin написал: Написано 14 Февраля 2016 в 22:28
Комментарий №5
Ну вот, смотри http://f4.s.qip.ru/19yBhtcbO.png в гугле кракозябры wink

Вовчик
0
Вовчик написал: Написано 14 Февраля 2016 в 23:24
Комментарий №6
удали этот браузер dry biggrin biggrin

Roman_Domnin
0
Roman_Domnin написал: Написано 14 Февраля 2016 в 23:50
Комментарий №7
Да не, для меня только гугль норм браузер biggrin

Код
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Вовчик
0
Вовчик написал: Написано 14 Февраля 2016 в 23:54
Комментарий №8
да сделал уже))

BLAzER
0
BLAzER написал: Написано 14 Февраля 2016 в 19:06
Комментарий №1
Окно неотцентрировано на горизонтали и вертикали sad

Вовчик
0
Вовчик написал: Написано 14 Февраля 2016 в 19:13
Комментарий №2
всмысли

BLAzER
0
BLAzER написал: Написано 15 Февраля 2016 в 05:03
Комментарий №9

Вовчик
0
Вовчик написал: Написано 15 Февраля 2016 в 07:05
Комментарий №10
ну поставь по 50%
.webo4ka-okno {background:#fff; position:fixed; top:20%; left:30%;

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: