BloGGood.ru

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

До Нового Года осталось:

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

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

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

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

Всем привет!
В этой статье я выложу готовый код для сайта, с помощью которого вы сможете сделать всплывающее окно на 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 type="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.

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

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

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

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

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

  1. nesnayka

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

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    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>
    

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    nesnayka отвечает:

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

    Степан => автор блога

    Степан => автор блога отвечает:

    Плохо Вы читали статью и смотрели код. С 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>
    
  2. Сергей

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    Сергей отвечает:

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

    Ответить

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

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

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

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