BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

Главная » Вебмастеру » Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время

Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время

2018-01-13 / Вр:20:07 / просмотров: 26414

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

Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Я думаю, стоит показать вам демонстрацию всплывающего окна:

[ демонстрация ]

Итак, чтобы заработало всплывающее окно, пропишите в CSS вот такие стили:

/* Базовые стили слоя, затемнения и модального окна */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);
position: fixed; /* фиксированное позиционирование */
cursor: default; /* тип курсора */
}

/* активируем слой затемнения */
.overlay:target {
display: block;
}

/* стили модального окна */
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
background: #fefefe;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}

/* активируем модальный блок */
.overlay:target+.popup {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}

/* формируем кнопку закрытия */
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}

.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}

.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

HTML (Ссылки на вызов модальных окон):

<!-- Ссылки на вызов модальных окон-->
<a href="#win1">Открыть окно </a>

HTML (модальное окно):

<!-- Модальное окно №1 -->
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
Здесь вы можете разместить любое содержание, текст с картинками или видео!
<a class="close"title="Закрыть" href="#close"></a>
</div>

В строку №4 вставляете содержимое.

Теперь усложним немного задачу.  Сделаем так, чтобы всплывающее окно появлялось через указанный промежуток времени. Потом, после закрытия окна, появлялась кнопка для повторного вызова этого же всплывающего окна.
Я думаю, лучше посмотреть работу кода в живую.

[ демонстрация ]

Итак, чтобы такого добиться, добавьте в CSS:

#wrap{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 200;
overflow: auto;
}

#window{
width: 400px;
height: 400px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}

.close {
margin-left: 364px;
margin-top: 4px;
cursor: pointer;
border: 2px solid #ffb5b5;
color: #ffb5b5;
background: #cc0000;
padding: 10px 14px;
border-radius: 30px;
font-weight: bold;
}

.close:hover {
color: #fff;
background: #f98d8d;
}

button#zayavka-fahcize {
/* float: right; */
position: fixed;
right: 5px;
bottom: 1px;
background: linear-gradient(to bottom, #0bc408 0%,#09a206 100%);
color: #fff;
font-size: 20px;
text-shadow: 0 1px 0 #757575;
padding: 4px 0 5px 0;
margin: 0;
cursor: pointer;
border: 0;
border-top: 1px solid #87c286;
border-right: 1px solid #0e780c;
border-left: 1px solid #0e780c;
border-bottom: 1px solid #0e780c;
box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #fff;
width: 200px;
border-radius: 2px;
}

button#zayavka-fahcize:hover {
background: linear-gradient(to bottom, #0bc408 0%,#09a206 0%);
}

HTML:

<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none'); document.getElementById('zayavka-fahcize').style= 'display: block !important';">X</span>
<div>Тут много текста.....................</div>
</div>

<!--Кнопка, которая появится после закрытия всплывающего окна-->
<button onclick="show('block')" id="zayavka-fahcize">Заявка</button>

JS (тут без этого ни как):

<script ENGINE="text/javascript">
//скрываем кнопку изначально
document.getElementById('zayavka-fahcize').style= "display: none !important";

//Функция показа
function show(state)
{
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;
}

<!-- появление окна попандер через 5 сек. -->
function explode(){
document.getElementById('window').style= "display: block !important";
document.getElementById('wrap').style= "display: block !important";
}
setTimeout(explode, 5000); //5000 это время, через которое нужно запустить функцию (5 секунд = 5000 миллисекунд)
</script>

Строка №17 – вы указываете в миллисекундах, когда должно появиться всплывающее окно.  В моем случае это 5000 миллисекунд (5 секунд).  Кстати, вам наверно будет интересно почитать статью про функцию setTimeout.

Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!

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

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

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

13 Ответов на комментарий - Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время

  1. nesnayka

    Сначала
    “…на CSS при клике по ссылке или через указанное время. Да, именно на CSS, при этом никакого JS или jQuery.”
    а потом
    “чтобы всплывающее окно появлялось через указанный промежуток времени.”
    и
    “JS (тут без этого ни как)”, “Строка №17 – вы указываете в миллисекундах”

    На чистом CSS, но с таймаутом на JS… ))
    Не спортивно! )))

    А реализация на чистом CSS есть. ) И без JS/jQ таки можно обойтись. )))

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

    Тогда в чем проблема, чего так сложно вместо этой лишней писанины, просто выложить код, если есть идеи как сделать без JS.
    А то расплодилось критиков ))))

  3. Сергей

    А почему оно называется “модальное”?

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

    Модальным окном называют те окна, которое блокирует работу пользователя до тех пор, пока пользователь не закроет это окно.

  5. Сергей

    Спасибо, буду знать.

  6. nesnayka

    Да пожалуйста. )))
    Вот: (только без плюшек, один механизм показа по клику с задержкой):

    <html>
    <head>
    <style>
    .popup{
    	border: 1px solid black;
    	background: white;
    	width: 100px;
    	height: 50px;
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	visibility:hidden;
    	opacity:0;
    	transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    }
    .link:focus ~ .popup{
    	visibility:visible;
    	opacity:1;
    	transition-delay:1s;
    }
    
    </style>
    </head>
    <body>
    <div tabindex="0" class="link">
    	link
    </div>
    <div class="popup">
    	popup text
    </div>
    </body>
    </html>
    
  7. Avatar photo Степан => автор блога

    А чем Вам мой код не устроил? Он намного красивее выглядит, эффектней и тоже на чистом CSS.

  8. nesnayka

    Тем, что, “на чистом CSS” – это без JS. ))

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

    Плохо Вы читали статью и смотрели код. С JS, это был последний код.
    Чем Вас не устроил первый код, на чистом CSS?

    <html>
    <head>
    <style>
    /* Базовые стили слоя, затемнения и модального окна */
    .overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    /* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное позиционирование */
    cursor: default; /* тип курсора */
    }
     
    /* активируем слой затемнения */
    .overlay:target {
    display: block;
    }
     
    /* стили модального окна */
    .popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    /* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
    /* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    /* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
    }
     
    /* активируем модальный блок */
    .overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
    }
     
    /* формируем кнопку закрытия */
    .close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
    }
     
    .close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
    }
     
    .close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    </style>
    </head>
    <body>
    <!-- Ссылки на вызов модальных окон-->
    <a href="#win1">Открыть окно </a>
    <!-- Модальное окно №1 -->
    <a href="#x" class="overlay" id="win1"></a>
    <div class="popup">
    Здесь вы можете разместить любое содержание, текст с картинками или видео!
    <a class="close"title="Закрыть" href="#close"></a>
    </div>
    </body>
    </html>
    
  10. Anderw

    Привет, а можно добавить, чтоб при выхода с сайте, (Мышка ушла за header, также опять вылезало окно?)

  11. Tnya

    Благодарю! Это то что я искала!! :rose:

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

    Пожалуйста ;)

  13. Андрей

    Хорошая статья, вот если бы еще подсказали как сделать чтоб всплывающее окно, которое появляется через указанный промежуток еще и само закрывалось через определенный промежуток времени а не только нажатием на крестик????? Пробовал и так и так изменять ваш код, не получается…Буду благодарен.

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

;-) :| :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