Всем привет!
В этой статье я поделюсь готовым кодом, с помощью которого вы без проблем сможете сделать всплывающее модальное окно.
Чем отличается код этого всплывающего окна от всех остальных? Тем, что в этом коде не используется 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}
Все, готово! Смотрим результат!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Как добавить социальные кнопки на сайт
Как сделать пинг (ping) и трассировку (tracert) сервера
Как очистить DNS кэша на Windows
Популярные статьи:
-
Как узнать 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, Вебмастеру, для сайта, эффекты для сайта
Хорошая штука
Степан добрый вечер. А как сделать так, что бы всплывающая кнопка выпадаля в определенном месте и в определенное время автоматически – без кликанья по ссылке при появлении человека на сайте на любой его страничке ?
Здравствуйте, Александр! Посмотрите здесь.
Если текст длинный или контактная форма большая нужно сделать примерно так:
/* Содержание */ .modal > div { width: 500px; height: 600px; overflow: auto; background: #fff; position: relative; margin: 10% auto;что бы кнопка закрыть не пряталась за прокруткой
/* Ссылка на кнопку Закрыть */ .modal a[href="#close"] { position: absolute; right: 20px; top: 20px; color: transparent; }Здравствуйте. Сделал все по вашей инструкции. Окошко получилось просто отличное и полностью рабочее. Но есть одна проблемка. Создаю одно окно , в котором ссылки на новости по конкретными категориям. Далее тут же создаю второе окно со ссылками на другую категорию. Создал ,сохранил. Когда кликаю на ссылку нового окна всплывает окно с описание и ссылками первого окна , то есть второе окно не создается , вернее создается , но полностью дублирует первое. Как то так …))) Как исправить, помогите пожалуйста советом. Еще раз спасибо огромное за ранее .
Для каждого нового окна, должно быть уникальное ID.
Попробуйте для первого:
для второго