BloGGood.ru

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

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

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

Главная » Эффекты для сайта » Как сделать всплывающее окно на сайте

Как сделать всплывающее окно на сайте

2015-09-09 / Вр:22:29 / просмотров: 17646

На сайтах, блогах или в интернет магазинах можно увидеть такой эффект, когда при нажатии на кнопку или ссылку затемняется веб-страница и появляются всплывающее окно с формой обратной связи или подпиской на курсы или с корзиной товаров и др. Сегодня мы попробуем что-то подобное сделать. Буду использовать HTML+CSS+Javascript.

Итак, есть два блока (div):  фон и само всплывающее окно с содержимым. Они скрыты, так как в CSS прописано свойство:

display: none;

И когда мы нажимает на кнопку или ссылку, чтобы вызвать всплывающее окно, два блока(div) появляются, так как в CSS свойство изменяется на:

display: block;

Саму суть, я думаю, вы поняли.

[посмотреть демонстрацию]

Вставьте в HTML файл перед  </body> вот такой код:

<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none')">X</span>
здесь текст, картинки и т.д
</div>
<!--Кнопка-->
<button onclick="show('block')">Показать окно</button>

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: 100;
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;
}

Сейчас блоки «wrap» и «window» находятся в скрытом состоянии:

display: none;

Чтобы блоки появились после нажатия по ссылке, добавьте Javascript код перед тегом </head> или перед тегом </body>:

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

При нажатии на кнопку «Показать окно» вызывается Javascript функция «show()» и к блокам  «wrap» и «window» будет присвоено свойство 'block':

А это значит, что блоки будут в состоянии видимости.

Вот абсолютно готовый код:

<!DOCTYPE HTML>
<html>
<head>
<title>Как сделать всплывающее окно на сайте</title>
<meta charset="utf-8">
<style>
#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: 100;
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;
}
</style>
</head>
<body>
<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none')">X</span>
<img class="aligncenter size-full wp-image-7815" src="https://bloggood.ru/wp-content/uploads/2014/09/CoverCommander.jpg" alt="Бесплатная книга от автора блога «5 тезисов, которые помогут достичь любых целей!»" width="270" height="370">
<br><a href="https://bloggood.ru/biblioteka/besplatnaya-kniga-ot-avtora-bloga-5-tezisov-kotorye-pomogut-dostich-lyubyx-celej.html/">Читать далее...</a>
</div>

<!--Кнопка-->
<button onclick="show('block')">Показать окно</button>
<script type="text/javascript">
//Функция показа
function show(state)
{
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;
}
</script>
</body>
</html>

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

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

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

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

  1. Елена

    Подскажите, пожалуйста, если нужно рядом расположить несколько картинок, которые будут служить кнопками для вызова функции, то как сократить код? Или для каждой кнопки нужно все прописывать полностью (кроме css, разумеется).

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

    Здравствуйте, Елена! Для каждой кнопки нужно прописывать полностью новое ID в стилях, название функции.

  3. Евгений

    Спасибо! Обратите внимание, что у Вас перепутан местами тег pre в первом коде – закрывающийся тег идет впереди открывающегося.

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

    Спасибо, Евгений!
    Тег pre в коде не нужен, это сам WordPress их влепил без моего согласия.
    Еще раз спасибо что заметили. В коде тег pre убрал.

  5. Андерей

    Добрый день!
    Подскажите, как сделать чтобы на одной странице работало несколько кнопок с разной информацией. У меня все работает, но выплывающее окно всегда с информацией последней кнопки (на всех). Пробовал делать разный ID, ничего не получается

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

    Здравствуйте, Андрей!

    <style>
    #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: 100;
    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;
    }
    
    #wrap2{
    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: 100;
    overflow: auto;
    }
     
    #window2{
    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;
    }
     
    </style>
    
    <!--1--> 
    <!--задний фон-->
    <div onclick="show('none')" id="wrap"></div>
    <!-- Всплывающее окно-->
    <div id="window">
    <!-- Крестик-->
    <span class="close" onclick="show('none')">X</span>
    здесь текст, картинки и т.д
    </div>
    <!--Кнопка 1-->
    <button onclick="show('block')">Показать окно</button>
    
    
    <!--2--> 
    <!--задний фон-->
    <div onclick="show('none')" id="wrap2"></div>
    <!-- Всплывающее окно-->
    <div id="window2">
    <!-- Крестик-->
    <span class="close" onclick="show2('none')">X</span>
    здесь текст, картинки и т.д ----2
    </div>
    <!--Кнопка 2-->
    <button onclick="show2('block')">Показать окно 2</button>
    
    <script ENGINE="text/javascript">
    //Функция показа
    function show(state)
    {
    document.getElementById('window').style.display = state;
    document.getElementById('wrap').style.display = state;
    }
    function show2(state)
    {
    document.getElementById('window2').style.display = state;
    document.getElementById('wrap2').style.display = state; 
    }
    </script>
    
  7. Андерей

    Добрый вечер. Степан!

    Спасибо большое! Все работает. Нашел ошибку, пропустил сделать уникальной функцию показа.

  8. Владислав

    :?: Простите, но у меня нет букв, они вопросы, как это исправить, скачать кукую-нибудь библеотеку?

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

    Нет, вам нужно поменять кодировку файла.

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

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

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

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