Страница 1 из 11
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Как настроить модальное окно на сайт
Как настроить модальное окно на сайт
Kosten
Дата: Суббота, 15.04.2017, 23:32 | Сообщение # 1
Администраторы
Сообщений:14276
Награды: 47


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



Вот можно посмотреть в вверх контейнере кнопка http://pluton.clan.su/

Установка:

В удобное для Вас место добавьте следующий код:

Код
<div class="modal">
  <a href="#modal" class="open">Открыть окно</a>
  <div class="modal_content" id="modal">
  <div class="title">Текст Вашего окна.</div>
  <a href="#" class="close">Закрыть</a>
  </div>
</div>


Таблица стилей (CSS) и вставьте в самый низ этот код:

Код
/* Общий стиль ссылок */
.modal a {display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; text-decoration: none !important; margin: 10px auto 0; box-shadow: 0 0 0 1px #fff; color: #fff; transition: opacity .4s;}

/* Общий стиль ссылок при наведение */
.modal a:hover, .modal a:active {opacity: .6;}

/* Стиль для кнопки "Открыть окно" */
.modal a.open {background: #07f;}

/* Стиль для кнопки "Закрыть" */
.modal a.close {background: #FF3D1E;}

/* Не трогать! Это для того, чтобы окно было по центру. */
.modal .modal_content {left: 0; top: 0; right: 0; bottom: 0; margin: auto;}

/* Стиль окна */
.modal .modal_content {position: fixed; display: block; background: #fff; padding: 20px; width: 250px; height: 100px; box-shadow: 0 5px 0 0 #07f inset, 0 0 0 1000px rgba(34,34,34,.65); text-align: center; font-size: 15px; line-height: 1.5;}

/* Эффект исчезновения для окна */
#modal:not(:target) {opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;}

/* Эффект появления для окна */
#modal:target {opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s;}
Прикрепления: 0092540.jpg(70Kb)
Kosten
Дата: Воскресенье, 16.04.2017, 19:24 | Сообщение # 2
Администраторы
Сообщений:14276
Награды: 47


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

Видео:



Картинка и описание:



Переходим по ссылке, что в описание.
Прикрепления: 1076256.jpg(54Kb) · 8384064.jpg(76Kb)
lananyallal
Дата: Вторник, 02.05.2017, 03:51 | Сообщение # 3
Пользователи
Сообщений:6
Награды: 1


В принципе, неплохо
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Как настроить модальное окно на сайт
Страница 1 из 11
Поиск: