http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная › Новости

Всплывающее модальное окно на CSS

Опубликовано: 01.09.2018

Всем привет!

В этой статье я поделюсь готовым кодом, с помощью которого вы без проблем сможете сделать всплывающее модальное окно .

Чем отличается код этого всплывающего окна от всех остальных ? Тем, что в этом коде не используется 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 , Вебмастеру , для сайта , эффекты для сайта
Карта
rss