BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Всплывающее модальное окно на CSS

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

2015-09-19 / Вр:22:30 / просмотров: 6989

Всем привет!
В этой статье я поделюсь готовым кодом, с помощью которого вы без проблем сможете сделать всплывающее модальное окно.
Чем отличается код этого всплывающего окна от всех остальных? Тем, что в этом коде не используется JavaScript или jQuery, а только чистый CSS.

В конечном итоге у вас получится вот такое всплывающее модальное окно:

Всплывающее модальное окно на 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}

 

Все, готово! Смотрим результат!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Всплывающее модальное окно на CSS

  1. Егор

    Хорошая штука :gazeta:

  2. Александр

    Степан добрый вечер. А как сделать так, что бы всплывающая кнопка выпадаля в определенном месте и в определенное время автоматически – без кликанья по ссылке при появлении человека на сайте на любой его страничке ?

  3. Avatar photo Степан => автор блога

    Здравствуйте, Александр! Посмотрите здесь.

  4. Сергей

    Если текст длинный или контактная форма большая нужно сделать примерно так:

    /* Содержание */
    .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;
    }
    
  5. Александр

    Здравствуйте. Сделал все по вашей инструкции. Окошко получилось просто отличное и полностью рабочее. Но есть одна проблемка. Создаю одно окно , в котором ссылки на новости по конкретными категориям. Далее тут же создаю второе окно со ссылками на другую категорию. Создал ,сохранил. Когда кликаю на ссылку нового окна всплывает окно с описание и ссылками первого окна , то есть второе окно не создается , вернее создается , но полностью дублирует первое. Как то так …))) Как исправить, помогите пожалуйста советом. Еще раз спасибо огромное за ранее .

  6. Avatar photo Степан => автор блога

    Для каждого нового окна, должно быть уникальное ID.
    Попробуйте для первого:

    <a href="#modal" class="openModal">Открыть модальное окно</a>
    <div id="modal" class="modal">
    ........
    

    для второго

    <a href="#modal2" class="openModal">Открыть модальное окно</a>
    <div id="modal2" class="modal">
    ...... 
    

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716