Как сделать всплывающее окно с затемненным и прозрачным задним фоном на javascript?

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

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

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

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

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

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

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

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

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

display: none;

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

display: block;

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

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

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

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

<script type="text/javascript">

			//Функция показа
	function show(state){

			document.getElementById('window').style.display = state;			
			document.getElementById('wrap').style.display = state; 			
	}
	
</script>

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

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

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

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

Demo пример окна

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

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Евгений пишет:

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

  2. Zefon пишет:

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

  3. Иван пишет:

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

  4. Слава пишет:

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

  5. Денис пишет:

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

  6. Денис пишет:

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

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

      • Денис пишет:

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

        • 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. Николай пишет:

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

  8. Андрей пишет:

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

  9. Артем пишет:

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

  10. Алексей пишет:

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

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

      <script type="text/javascript">
      
      			//Функция показа 2
      	function show2(state){
      
      			document.getElementById('window_2').style.display = state;			
      			document.getElementById('wrap').style.display = state; 			
      	}
      	
      </script>
      
      <div id="window_2">
      
            Другое содержимое..
      </div>
      
      <button class="myButton" onclick="show2('block')">Показать окно 2</button>
      
       

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

  11. Егор пишет:

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

  12. Елена пишет:

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

  13. Елена пишет:

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

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

      Проверьте – всё ли правильно скопировали из примера (скачанных файлов).

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>