Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Создаем модальное окно на одном CSS
Создаем модальное окно на одном CSS
workman
Дата: Воскресенье, 17.01.2016, 01:53 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


1. Создаем файл с содержимым, названием Obratka.css и загружаем в ФМ
Код
.overlay{top:0;right:0;bottom:0;left:0;z-index:10;display:none; background-color:rgba(0,0,0,0.65);position:fixed; cursor:default;}
.overlay:target{display:block}
.popup{top:-100%;right:0;left:50%;font-size:14px;z-index:20;margin:0;width:85%;min-width:320px;max-width:600px; position:fixed;padding:15px;border:1px solid #383838;background:#FEFEFE; -webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;font:14px/18px 'Tahoma',Arial,sans-serif; -webkit-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-moz-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-ms-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-webkit-transform:translate(-50%,-500%);-ms-transform:translate(-50%,-500%);-o-transform:translate(-50%,-500%);transform:translate(-50%,-500%);-webkit-transition:-webkit-transform .6s ease-out;-moz-transition:-moz-transform .6s ease-out;-o-transition:-o-transform .6s ease-out;transition:transform .6s ease-out}
.overlay:target+.popup{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);top:20%}
.close{top:-10px;right:-10px;width:20px;height:20px;position:absolute;padding:0;border:2px solid #CCC;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;background-color:rgba(61,61,61,0.8);-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:center;text-decoration:none;font:13px/20px 'Tahoma',Arial,sans-serif;font-weight:bold;-webkit-transition:all ease .8s;-moz-transition:all ease .8s;-ms-transition:all ease .8s;-o-transition:all ease .8s;transition:all ease .8s}
.close:before{color:rgba(255,255,255,0.9);content:"X";text-shadow:0 -1px rgba(0,0,0,0.9);font-size:12px}
.close:hover{background-color:rgba(252,20,0,0.8);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
.popup img{width:100%}
.pic-left,.pic-right{width:25%;height:auto}
.pic-left{float:left;margin:5px 15px 5px 0}
.pic-right{float:right;margin:5px 0 5px 15px}
.popup embed,.popup iframe{top:0;right:0;bottom:0;left:0;display:block;margin:auto;min-width:320px;max-width:600px;width:100%}

Далее идем в ПУ » Главная » Управление дизайном » Редактирование шаблонов » Нижняя часть сайта » Ставим в самый низ
Код
<link rel='stylesheet' href="/Obratka.css" />
<!-- Модальное окно --><a href="#x" class="overlay" id="win1"></a><div class="popup">Содержимое окна<a class="close"title="Закрыть" href="#close"></a></div><!-- /Модальное окно -->

По месту где нужно ставим ссылку вызова окна
Код
<a href="#win1">модальное окно</a>

Таким образом можно хоть 100 окон поставить, только меняем №ID как в ссылке, так и в блоке вызова.

В добавок ко всему еще данные стили заточены под видео ролики.
На этом все ...

Просмотреть как данное работает, можно пройдя сюда по ссылке и кликнув по разным кнопкам которые там увидите
(К сожалению временно не откроется в браузере Гугл Хром, так как сайт с него недоступен)

Прикрепления: 1083095.png(22Kb)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...

Сообщение отредактировал workman - Воскресенье, 17.01.2016, 11:55
Kosten
Дата: Воскресенье, 17.01.2016, 03:58 | Сообщение # 2
Администраторы
Сообщений:12716
Награды: 39


Цитата workman ()
(К сожалению временно не откроется в браузере Гугл Хром, так как сайт с него недоступен)

Пора настраивать 70% с Хрома заходят на сайт.


Maryges
Дата: Воскресенье, 17.01.2016, 04:01 | Сообщение # 3
Пользователи
Сообщений:116
Награды: 0


Что то не показалось модальное окно. wink
workman
Дата: Воскресенье, 17.01.2016, 11:35 | Сообщение # 4
Vip
Сообщений:1576
Награды: 7


Цитата Maryges ()
Что то не показалось модальное окно.

Значит грязный браузер у тебя... Давно чистил куки?


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
workman
Дата: Воскресенье, 17.01.2016, 11:51 | Сообщение # 5
Vip
Сообщений:1576
Награды: 7


Цитата Kosten ()
Пора настраивать 70% с Хрома заходят на сайт

Да и так уже не один запрос отправил в Гугл .. Жду теперь обновление базы. У ПС как всегда все быстро на счет того чтобы отключить,а вот включают обратно они к сожалению не так быстро как хотелось


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Создаем модальное окно на одном CSS
Страница 1 из 11
Поиск: