Как сделать всплывающее окно с затемнением фона на javascript и html — пример + исходники.

Как сделать всплывающее окно - пример + исходники.

Приветствую читателей! Конечно же картинка к данному посту практически не имеется отношения, разве что названия “объектов” одинаковые. Сегодня я расскажу как можно сделать всплывающее окно на javascript!

Со всплывающими окнами в интернете вы встречаетесь очень часто, например, они появляются когда вы просматриваете фотографии – почти во всех популярных социальных сетях (в контакте, одноклассники, инстаграм..), т.е. это такое окошко, которое появляется в центре монитора, на прозрачном, чаще всего, черном фоне.

Всплывающее окно на черном фоне

В этом уроке я расскажу как делаются такие окна, а в конце статьи, как и всегда, имеется демо пример и возможность скачать готовый файл примера.

Итак, давайте начнем..

Как делаются такие окна?

Вообще, суть очень проста – окно само по себе – это обычный div блок, а задний фон – это еще один div  черного (или какого-нибудь другого) цвета у которого задана прозрачность.

То есть изначально на странице уже размещены два (2) div блока, но они скрыты – у них установлены вот такие css свойства:

display: none;

Соответственно, когда нам нужно сделать так, чтобы окошко “всплыло” (нажали на фотографию, на ссылку войти/регистрация, предложение подписаться и т.д. ), нужно просто изменить свойства двух этих блоков, соответственно на:

display: block;

Когда же нам нужно убрать это окно, мы просто снова меня стили – вот и все.

Делаем всплывающее окно

Мы сделаем небольшое окошко (400 на 400 пикселей) и поместим туда, для примера, картинку ipad’a, пару кнопочек, а также кнопку закрытия окна (крестик).

А теперь взглянем на этот громадный код..


Вообще, большая ценность, на мой взгляд, содержится в css коде, ежели в коде javascript, потому что на подбор правильного фона, центрирование объектов на странице и внутри окна, уходит куда больше времени, чем на написание нескольких строчек javascript кода.

Функция show(state) отвечает за изменение стилей показа блоков, а параметр state непосредственно содержит значение стиля (либо block либо none).

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

Чтобы стало понятно как применяется (как вызывается данная функция) скачайте и взгляните на код файла примера, в нем имеются все необходимые стили, HTML разметка, а также небольшие комментарии.

Demo пример окна

Скачать пример

На этом все, думаю вы найдете этому применение, желаю удачи, до новых встреч!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Как сделать всплывающее окно с затемнением фона на javascript и html — пример + исходники.: 46 комментариев

  1. Евгений

    Отлично, спасибо. Можно ли сделать то же самое, но в модальном режиме? Чтобы пока не закроешь форму, нельзя было вернуться в документ.

    1. Виталий Admin

      Вы умеете ввиду, что закрытие окна должно происходить Только по нажатию на Крестик?

      1. Евгений

        да, скажите как это сделать

        1. A/B

          Все очень просто, вместо строчки надо сделать

  2. Zefon

    Спасибо то что нужно

    1. Виталий Admin

      Всегда пожалуйста!

  3. Иван

    Добрый день Виталий! мне нужно сделать несколько окон с разными фото и стилями, как заставить button обращаться к разным стилям, блокам. Заранее спасибо.

    1. светлана

      Такая же проблемка, не могу решить. HELP!

  4. Слава

    ООО! Крутяк! Ну, ты это, ну, типа спасибо, чо ))))

    1. Виталий Admin

      Пожалуйста)

  5. Денис

    Отличный матерьял!!! Спасибо !!!

    1. Виталий Admin

      Всегда рад помочь!

  6. Денис

    Спасибо. Как реализовать возможность использования данного скрипта несколько раз на одной странице?

    1. Виталий Admin

      Не совсем понял, несколько раз – это как?

      1. Денис

        К нескольким картинкам на одной странице. сейчас всплывающее окно работает только для первого изображения.

        1. Grizzli

          Все просто данный скрипт надо поменять и путь кним //Функция показа function show(state){ document.getElementById(‘window’).style.display = state; document.getElementById(‘wrap’).style.display = state; } надо сделать 2 разных скрипта пример function show1(state){ document.getElementById(‘win’).style.display = state; document.getElementById(‘wra’).style.display = state; } также show присутствует в кнопке my buttom =)

  7. Николай

    Очень харашо. Бальшоє спасибо!

    1. Виталий Admin

      Всегда пожалуйста!

  8. Андрей

    А у меня такая проблема. Делаю форму регистрации. На первом окне форма входа и кнопки войти и регистрация. Если человек не зарегистрирован и нажимает регистрацию, то фон становится еще темнее (снова wrap активируется), появляется форма регистрации, но через секунду пропадает. Как исправить данную ошибку?

    1. Виталий Admin

      Добрый день! Приведите пример кода, без него я не смогу дать ответ, а также опишите, по шагам, решаемую задачу, что должно происходить и т.д.

  9. Артем

    Спасибо, оч выручили! Отличное решение!

    1. Виталий Admin

      Всегда пожалуйста!

  10. Алексей

    Здравствуйте! Вопрос такой: Как сделать так чтобы по одной ссылке в всплывающем окне была информация одна, а по другой ссылке другая (которую я укажу). У меня получается сделать только так, чтобы всё время открывалось окно с айпадом.

    1. Виталий Admin

      Доброго времени суток! Если пойти самым простым путем, то можно добавить второе окно, дав ему другой id, вторую функцию и вторую кнопку, например так:

      Другое содержимое..

      Этот пример – для понимания, можно сделать все с помощью одной функции, но и этот код вполне рабочий.

  11. Егор

    Спасибо за материал!

    1. Виталий Admin

      Всегда пожалуйста!

  12. Елена

    Как разместить окно в том месте, где оно было открыто? Сейчас при его открытии, например, в футере весь контент прыгает вниз…Когда много таких окон на сайте, это раздражает. Приходится постоянно скролить вниз…

  13. Елена

    * прыгает наверх хотела написать. К началу сайта

    1. Виталий Admin

      Не глядя на сайт, сложно что-либо сказать. Окно должно открываться по центру экрана, если это не так, то, скорее всего, где-то стили перебиваются, либо проблемы с версткой сайта. Проверьте – всё ли правильно скопировали из примера (скачанных файлов).

      1. Елена

        Понятно. Спасибо! Будем искать ошибку…

  14. Марианна

    Подскажите пжлст как сделать что бы прокручивался не фон, а само окно?

    1. Виталий Admin

      Не понял вас, окно разве прокручивается?

  15. kostya

    Здравствуйте. Подскажите, пожалуйста, также интересует как сделать, чтобы закрытие окна происходило Только по нажатию на Крестик? Чтобы пока не закроешь форму, нельзя было вернуться на страницу сайта. Я в комментариях нашел такой вопрос но ответ там без кода, мучаюсь ищу вот уже долго). Спасибо

    1. Виталий Admin

      Добрый день, для этого просто нужно убрать вызов функции, то есть заменить этот HTML код:

      на этот:

  16. Виктор

    Подскажите пожалуйста как на input button поставить эту функцию. Прописываю onclick=”show(‘block’)” в input и при нажатии выводит окно но на долю секунды. Как исправить?

    1. Виталий Admin

      У вас наверное страница перезагружается, попробуйте так:

    1. Виталий Admin

      Добрый день, если речь идет о появлении Окна с данной картинкой, то так: О нас

  17. Николай

    Здравствуйте, Виталий! Отличная статья, очень помогла! Есть вопрос, который задавала Марианна >>Марианна 7 Июль 2017 в 23:36 >>Подскажите пжлст как сделать что бы прокручивался не фон, а само окно? Поясню. Вместо картинки я хочу показать текст. Текст большой и в размеры окна не помещается. Если крутить колёсико, то прокручивается “фон”, где кнопки расположены, а текст во всплывающем окне не движется, т.е. нет возможности посмотреть его целиком. Только то, что помещается на экран. Подскажите, как сделать так, чтобы прокручивался текст во всплывающем окне.

    1. Виталий Admin

      Доброго дня, понял вас, это делается стилями, просто добавьте в исходном коде страницы overflow-y: auto для id window, то есть стиль должен быть таким: #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; overflow-y: auto; }

      1. Николай

        Нашел сам. в css для окна(в примере window) надо прописать “overflow: auto;” Еще раз спасибо за статью!

        1. Виталий Admin

          Пожалуйста

  18. Евгений

    Здравствуйте! Подскажите, пожалуйста, как сделать открытие всплывающего окна для нескольких кнопок, но не используя для каждой кнопки отдельную функцию, так как количество кнопок может быть неограниченно. Как бы каждая кнопка должна открывать окно со своими данными, подобно карточке товара в интернет-магазинах, где без загрузки новой страницы просто открывается всплывающее окно с подробным описанием товара, к примеру. Таким же образом делается всплывающее окно с подтверждением удаления, но не confirm а своё стилизованное. Есть блоки в которых написана краткая информация и в этом же блоке есть кнопка при нажатии на которую должно открываться окно с подробными данными относящимися к этому же блоку. Сейчас у меня всплывающие окна находятся в каждом таком блоке с position: absolute; но при нажатии на кнопку открывается только первое окно. Вот такой у меня код: var modal = document.getElementById(‘myModal’); var btn = document.getElementById(“myBtn”); var span = document.getElementsByClassName(“close”)[0]; btn.onclick = function () { modal.style.display = “block”; } span.onclick = function () { modal.style.display = “none”; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = “none”; } } То есть открытие определённого окна по определённому идентификатору, как бы, так сказать, не знаю на сколько ясно смог задать вопрос. 🙂

    1. Виталий Admin

      Добрый день, как я понял, речь идет об универсальной функции, для этого нужно просто добавить еще один параметр, например, id окна, которое вы собираетесь отрыть. Новая функция будет выглядеть следующим образом: function show(state,window_id){ document.getElementById(window_id).style.display = state; document.getElementById(‘wrap’).style.display = state; } window_id – это id окна, которое нужно открыть (скрыть), соответственно кнопки будут выглядеть так: Окна будут такими:

      Содержимое первого окна
      Содержимое второго окна

      Ну и стили тоже нужно будет подправить

      1. Евгений

        Спасибо, благодарю. Сутки с этим игрался 🙂

        1. Виталий Admin

          Пожалуйста, рад был помочь!

Обсуждение закрыто.