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


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

597
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    228
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: