Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Хаки / Дополнения
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

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

    Дата добавления: 11.04.2017 - 11:40
    Добавил: Buger
    Количество просмотров: 2.9k
    Количество комментариев: 0
    Размер файла: 1.6 Kb
    Рейтинг материала: 5.0 / 2
    Модальное окно на чистом CSS
    БЕСПЛАТНО
    Демонстрация
    рейтинг 5.0
    /
    голосов 2
    Простое модальное окно созданное на чистом 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;}


    Источник: http://webo4ka.ru
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: