Простое модальное окно на чистом CSS

795
10 из 10
Проголосовало: 12






Простое модальное окно созданное на чистом CSS3 без использования сторонних скриптов.
Вы сможете с лёгкостью добавить окно на свой сайт и изменить под сайт.

Установка:
В удобное для Вас место добавьте следующий код:
Код
<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;}


На этом с установкой всё.

P.s.
Для того, чтобы создать несколько модальных окон на одной странице - нужно чтобы id модального окна отличался от другого, ну и ссылка открытия соответственно, и добавить новое окно в CSS.

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

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


CSS:
Код
#modalONE:not(:target), #modalTWO:not(:target) {opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;}
#modalONE:target, #modalTWO:target {opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s;}
Автор публикации: Загрузка
Загрузка
CbIPoK2513, это его n материал
Источник: http://pandora.clan.su/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
    Последние темы
    Опрос
    261
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: