Всем привет!
В этой статье я поделюсь готовым кодом, с помощью которого вы без проблем сможете сделать всплывающее модальное окно.
Чем отличается код этого всплывающего окна от всех остальных? Тем, что в этом коде не используется JavaScript или jQuery, а только чистый CSS.
В конечном итоге у вас получится вот такое всплывающее модальное окно:
Посмотрите демонстрацию:
Не буду забирать ваше драгоценное время, а приступлю сразу к делу.
Вставьте вот этот код между тегами <body></body>:
<a href="#modal" class="openModal">Открыть модальное окно</a> <div id="modal" class="modal"> <div> <div class="text">Любое содержимое модального окна</div> <a href="#close" title="Закрыть">Закрыть</a> </div> </div>
Вместо текста «Любое содержимое модального окна» вы можете вставить форму обратной связи, видео или любой другой текст.
Теперь вставьте вот этот код в CSS:
/* Слой перекрытия */ .modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:9; /* Трансформации прозрачности при открытии */ transition:opacity 511ms ease-in; /*Скрываем изначально*/ opacity:0;pointer-events:none } /* Показываем модальное окно */ .modal:target { opacity:1;pointer-events:auto } /* Содержание */ .modal>div{ width:311px;background:#fff;position:relative;margin:9% auto; /*По умолчанию минимизируем анимацию*/ -webkit-animation:minimise 511ms linear; /*Придаем хороший вид*/ padding:31px; border-radius:7px;box-shadow:0 3px 9px #000; text-shadow:0 1px 0 #fff; } /*Изменяем анимацию при открытии модального окна*/ .modal:target>div{ -webkit-animation-name:bounce } .modal h2{ font-size:35px;padding:0 0 9px; } @-webkit-keyframes bounce{0%{-webkit-transform:scale3d(.1,.1,1); -webkit-box-shadow:0 3px 9px #000}55%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 9px 9px #000}75%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 0 9px #000}100%{-webkit-transform:scale3d(1,1,1); -webkit-box-shadow:0 3px 9px #000}} @-webkit-keyframes minimise{0%{-webkit-transform:scale3d(1,1,1)}100%{-webkit-transform:scale3d(.1,.1,1)}} /*Ссылка на кнопку Закрыть*/ .modal a[href="#close"]{position:absolute;right:0;top:0;color:transparent} /*Сбрасываем изменения*/ .modal a[href="#close"]:focus{outline:none} /*Создаем кнопку Закрыть*/ .modal a[href="#close"]:after{content:'X';display:block; /*Позиционируем*/ position:absolute;right:-9px;top:-9px;width:19px;padding:1px; /*Стили*/ text-decoration:none; text-shadow:none; text-align:center; font-weight:bold; background:#000; color:#fff; border:3px solid #fff; border-radius:19px; box-shadow:0 1px 3px #000 } .modal a[href="#close"]:focus:after,.modal a[href="#close"]:hover:after{-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); } .modal a[href="#close"]:focus:after{outline:0 solid #000} /*Открываем модальное окно*/a.openModal{} a.openModal:hover,a.openModal:focus{} .modal .modal_title{display:block;text-align:center;font-size:19pt}
Все, готово! Смотрим результат!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504
6 Ответов на комментарий - Всплывающее модальное окно на CSS
Добавить комментарий
Метки: css, Вебмастеру, для сайта, эффекты для сайта
Хорошая штука
Степан добрый вечер. А как сделать так, что бы всплывающая кнопка выпадаля в определенном месте и в определенное время автоматически – без кликанья по ссылке при появлении человека на сайте на любой его страничке ?
Здравствуйте, Александр! Посмотрите здесь.
Если текст длинный или контактная форма большая нужно сделать примерно так:
что бы кнопка закрыть не пряталась за прокруткой
Здравствуйте. Сделал все по вашей инструкции. Окошко получилось просто отличное и полностью рабочее. Но есть одна проблемка. Создаю одно окно , в котором ссылки на новости по конкретными категориям. Далее тут же создаю второе окно со ссылками на другую категорию. Создал ,сохранил. Когда кликаю на ссылку нового окна всплывает окно с описание и ссылками первого окна , то есть второе окно не создается , вернее создается , но полностью дублирует первое. Как то так …))) Как исправить, помогите пожалуйста советом. Еще раз спасибо огромное за ранее .
Для каждого нового окна, должно быть уникальное ID.
Попробуйте для первого:
для второго