Как вызвать всплывающее окно js
Перейти к содержимому

Как вызвать всплывающее окно js

  • автор:

Как вызвать всплывающее окно js

Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна.

Метод alert() выводит окно с сообщением:

alert("hello world");

Метод confirm() отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена. В зависимости от выбора пользователя метод возвращает true (если пользователь нажал OK) или false (если пользователь нажал кнопку Отмены):

var result = confirm("Завершить выполнение программы?"); if(result===true) document.write("Работа программы завершена"); else document.write("Программа продолжает работать");

Функция confirm в JavaScript

И метод prompt() позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные. Данный метод возвращает введенное пользователем значение:

var age = prompt("Введите свой возраст:"); document.write("Вам " + age + " лет");

Если пользователь откажется вводить значение и нажмет на кнопку отмены, то метод возвратит значение null.

Функция prompt в JavaScript

Открытие, закрытие и позиционирование окон

Объект window также предоставляет ряд методов для управления окнами браузера. Так, метод open() открывает определенный ресурс в новом окне или вкладке браузера. Стоит учитывать, что подобное действие лучше выполнять по действию пользователя, например, по нажатию на кнопку, потому что в ином случае браузеры могут заблокировать подобные окна. Например, определим следующую страницу:

    METANIT.COM

Здесь на веб-странице определена кнопка — элемент button. У кнопки установлен атрибут onclick , который указывает на функцию javascript, которая будет выполняться по нажатию этой кнопки.

В коде javascript определена функция openWindow() , которая выполняется по нажатию на кнопку. В этой функции выполняется функция window.open() , в которую в качестве первого параметра передается адрес — в данном случае «https://microsoft.com». И по нажатию на кнопку будет открываться в новой вкладке страницы «https://microsoft.com».

window.open в javascript

Метод open() принимает ряд параметров:

open(); open(url); open(url, target); open(url, target, windowFeatures);

В качестве первого параметра — url передается путь к ресурсу.

Второй параметр — target передается путь к ресурсу. Распространенные значения:

  • _self : страница открывается в текущей вкладке
  • _blank : страница открывается в новой вкладке или в отдельном окне

Например, открытие адреса в той же вкладке:

window.open("https://metanit.com", "_self");

Третий параметр позволяет установить набор стилевых характеристик окна. Каждая стилевая характеристика определяется в виде наборов name=value , где name — название стилевой характеристики, а value — ее значение. Друг от друга стилевые характеристики отделены запятой.

В частности, можно использовать следующие характеристики:

    popup : указывает, будет ли открываться страница в отдельном всплывающем окне. Для этого может принимать такие значения, как yes , 1 или true . Например:

window.open("https://metanit.com", "_blank", "popup=yes");

всплывающие окна и window.open в javascript

  • width / innerWidth : ширина окна в пикселях. Например, width=640
  • height / innerHeight : высота окна в пикселях. Например, height=480
  • left / screenX : координата X относительно начала экрана в пикселях. Например, left=0
  • top / screenY : координата Y относительно начала экрана в пикселях. Например, top=0

    • Пример применения нескольких параметров:

    window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200");

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

    С помощью метода close() можно закрыть окно. Например, откроем новое окно и через 5 секунд закроем его:

    function openWindow()< const popup = window.open("https://metanit.com", "_blank", "width=600,height=400"); setTimeout(()=>popup.close(), 5000); >

    Метод moveTo() позволяет переместить окно на новую позицию:

    const popup = window.open("https://metanit.com", "_blank", "width=600,height=400"); popup.moveTo(500,400);

    В данном случае окно перемещается на позицию с координатами x=500, y=400 относительно левого верхнего угла экрана.

    Открытие окон и методы window

    Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

    Более новая информация по этой теме находится на странице https://learn.javascript.ru/popup-windows.

    Всплывающее окно («попап» – от англ. Popup window) – один из старейших способов показать пользователю ещё один документ.

    В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.

    window.open("http://ya.ru");

    …При запуске откроется новое окно с указанным URL.

    Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.

    Блокировщик всплывающих окон

    Рекламные попапы очень надоели посетителям, аж со времён 20-го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.

    Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя.

    Как же браузер понимает – посетитель вызвал открытие окна или нет?

    Для этого при работе скрипта он хранит внутренний «флаг», который говорит – инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг «инициировано посетителем» и попапы при этом разрешены.

    А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

    Полный синтаксис window.open

    win = window.open(url, name, params)

    Функция возвращает ссылку на объект window нового окна, либо null , если окно было заблокировано браузером.

    url URL для загрузки в новое окно. name Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое. params Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.

    Значения параметров params .

    1. Настройки расположения окна:

    Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.

    Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

    Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

    1. Свойства окна:
    1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.

    Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».

    • Если при вызове open указан только первый параметр, параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.
    • Если указана строка с параметрами, но некоторые yes/no параметры отсутствуют, то браузер выставляет их в no . Поэтому убедитесь, что все нужные вам параметры выставлены в yes .
    • Когда не указан top/left , то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.
    • Если не указаны width/height , новое окно будет такого же размера, как последнее открытое.

    Доступ к новому окну

    Вызов window.open возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.

    В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:

    var newWin = window.open("about:blank", "hello", "width=200,height=200"); newWin.document.write("Привет, мир!");

    А здесь модифицируем содержимое после загрузки:

    var newWin = window.open('/', 'example', 'width=600,height=400'); alert(newWin.location.href); // (*) about:blank, загрузка ещё не началась newWin.onload = function() < // создать div в документе нового окна var div = newWin.document.createElement('div'), body = newWin.document.body; div.innerHTML = 'Добро пожаловать!' div.style.fontSize = '30px' // вставить первым элементом в body нового окна body.insertBefore(div, body.firstChild); >

    Обратим внимание: сразу после window.open новое окно ещё не загружено. Это демонстрирует alert в строке (*) . Поэтому в примере выше окно модифицируется при onload . Можно было и поставить обработчик на DOMContentLoaded для newWin.document .

    Связь между окнами – двухсторонняя.

    Родительское окно получает ссылку на новое через window.open , а дочернее – ссылку на родителя window.opener .

    Оно тоже может его модифицировать.

    Если запустить пример ниже, то новое окно заменит содержимое текущего на ‘Test’ :

    var newWin = window.open("about:blank", "hello", "width=200,height=200"); newWin.document.write( "window.opener.document.body.innerHTML = 'Test'" );

    Same Origin Policy – защита проверкой протокол-сайт-порт

    Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если URL нового окна происходит из того же источника (англ. – «Same Origin»), т.е. совпадают домен, протокол и порт.

    Иначе говоря, если новое окно содержит документ с того же сайта.

    Больше информации об этом будет позже, в главе Кросс-доменные ограничения и их обход.

    События

    Наиболее важные события при работе с окном браузера:

    • onresize – событие изменения размера окна.
    • onscroll – событие при прокрутке окна.
    • onload – полностью загрузилась страница со всеми ресурсами.
    • onfocus/onblur – получение/потеря фокуса.

    Методы и свойства

    window.closed Свойство window.closed равно true , если окно закрыто. Может быть использовано, чтобы проверить, закрыл ли посетитель попап. window.close() Закрывает попап без предупреждений и уведомлений. Вообще, метод close() можно вызвать для любого окна, в том числе, текущего. Но если окно открыто не с помощью window.open() , то браузер может проигнорировать вызов close или запросить подтверждение.

    Перемещение и изменение размеров окна

    Существует несколько методов для перемещения/изменения размеров окна.

    win.moveBy(x,y) Перемещает окно относительно текущего положения на x пикселей вправо и y пикселей вниз. Допускаются отрицательные значения. win.moveTo(x,y) Передвигает окно в заданную координатами x и y точку экрана монитора. win.resizeBy(width,height) Изменяет размер окна на заданную величину width/height (ширина/высота). Допускаются отрицательные значения. win.resizeTo(width,height) Изменяет размер окна на заданное значение.

    Чтобы предотвратить использование этих методов с плохими целями, браузеры часто блокируют их выполнение. Как правило, они работают, если окно win открыто вызовом window.open из JavaScript текущей страницы и в нём нет дополнительных вкладок.

    Ни свернуть ни развернуть

    Заметим, что JavaScript не может ни свернуть ни развернуть ни «максимизировать» (Windows) окно.

    Эти функции операционной системы от Frontend-разработчиков скрыты. Вызовы, описанные выше, в случае свёрнутого или максимизированного окна не работают.

    Прокрутка окна

    Прокрутка окна требуется, пожалуй, чаще всего. Мы уже говорили о ней в главе Размеры и прокрутка страницы:

    win.scrollBy(x,y) Прокрутка окна на заданное число пикселей вперёд или назад. Допускаются отрицательные значения. win.scrollTo(x,y) Прокручивает окно к заданным координатам. elem.scrollIntoView(top) Этот метод прокрутки вызывается на элементе. При этом окно прокручивается так, чтобы элемент был полностью видим. Если параметр top равен true или не задан, то верх элемента совпадает с верхом окна. Если он равен false , то окно прокручивается так, чтобы нижний край элемента совпал с нижним краем окна.

    Итого

    • Всплывающее окно открывается с помощью вызова window.open(url, name, params) .
    • Метод window.open возвращает ссылку на новое окно или null , если окно было заблокировано.
    • Современные браузеры блокируют окна, если window.open вызвано не в результате действия посетителя.
    • Обычно открывается вкладка, но если заданы размеры и позиция – то именно окно.
    • Новое окно имеет ссылку на родительское в window.opener .
    • Окна могут общаться между собой как угодно, если они из одного источника. Иначе действуют жёсткие ограничения безопасности.

    Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, с помощью технологии AJAX, а показать – в элементе , расположенным над страницей ( z-index ). Ещё одна альтернатива – тег .

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

    Если вы хотите использовать всплывающее окно, предупредите посетителя об этом, так же и при использовании target=»_blank» в ссылках или формах. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.

    Открытие окон и методы window

    Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.

    window.open('https://javascript.info/')

    … и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.

    Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном , так что попапы используются не каждый день.

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

    Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:

    1. Попап – это отдельное окно со своим JavaScript-окружением. Так что открытие попапа со стороннего, не доверенного сайта вполне безопасно
    2. Открыть попап очень просто.
    3. Попап может производить навигацию (менять URL) и отсылать сообщения в основное окно.

    Блокировка попапов

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

    Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).

    // попап заблокирован window.open('https://javascript.info'); // попап будет показан button.onclick = () => < window.open('https://javascript.info'); >;

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

    Полный синтаксис window.open

    Синтаксис открытия нового окна: window.open(url, name, params) :

    url URL для загрузки в новом окне. name Имя нового окна. У каждого окна есть свойство window.name , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. params Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100 .

    Параметры в строке params :

    • Позиция окна:
      • left/top (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
      • width/height (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
      • menubar (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
      • toolbar (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
      • location (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
      • status (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
      • resizable (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
      • scrollbars (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

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

      Пример: минималистичное окно

      Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:

      let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, width=0,height=0,left=-1000,top=-1000`; open('/', 'test', params);

      В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые width/height и отрицательные left/top . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

      Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):

      let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, width=600,height=300,left=100,top=100`; open('/', 'test', params);

      Большинство браузеров выведет окно с заданными нами настройками.

      Правила для опущенных параметров:

      • Если третий аргумент при вызове open отсутствует или он пустой, будут использованы настройки окна по умолчанию.
      • Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано no , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
      • Если координаты left/top не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
      • Если не заданы размеры окна width/height , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

      Доступ к попапу из основного окна

      Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.

      Например, здесь мы генерируем содержимое попапа из JavaScript:

      let newWin = window.open("about:blank", "hello", "width=200,height=200"); newWin.document.write("Hello, world!");

      А здесь содержимое окна модифицируется после загрузки:

      let newWindow = open('/', 'example', 'width=300,height=300') newWindow.focus(); alert(newWindow.location.href); // (*) about:blank, загрузка ещё не началась newWindow.onload = function() < let html = `
      Добро пожаловать!
      `; newWindow.document.body.insertAdjacentHTML('afterbegin', html); >;

      Обратите внимание: сразу после window.open новое окно ещё не загружено. Это демонстрируется в строке (*) . Так что нужно ждать onload , чтобы его изменить. Или же поставить обработчик DOMContentLoaded на newWin.document .

      Политика одного источника

      Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

      Иначе, например, если основное окно с site.com , а попап с gmail.com , это невозможно по соображениям пользовательской безопасности. Детали см. в главе Общение между окнами.

      Доступ к открывшему окну из попапа

      Попап также может обратиться к открывшему его окну по ссылке window.opener . Она равна null для всех окон, кроме попапов.

      Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:

      let newWin = window.open("about:blank", "hello", "width=200,height=200"); newWin.document.write( "window.opener.document.body.innerHTML = 'Тест'" );

      Так что связь между окнами двусторонняя: главное окно и попап имеют ссылки друг на друга.

      Закрытие попапа

      Чтобы закрыть окно: win.close()

      Для проверки, закрыто ли окно: win.closed .

      Технически метод close() доступен для любого окна, но window.close() будет игнорироваться большинством браузеров, если window не было создано с помощью window.open() . Так что он сработает только для попапов.

      Если окно закрыто, то его свойство closed имеет значение true . Таким образом можно легко проверить, закрыт ли попап (или главное окно) или все ещё открыт. Пользователь может закрыть его в любой момент, и наш код должен учитывать эту возможность.

      Этот код откроет и затем закроет окно:

      let newWindow = open('/', 'example', 'width=300,height=300'); newWindow.onload = function() < newWindow.close(); alert(newWindow.closed); // true >;

      Прокрутка и изменение размеров

      Методы для передвижения и изменения размеров окна:

      win.moveBy(x,y) Переместить окно относительно текущей позиции на x пикселей вправо и y пикселей вниз. Допустимы отрицательные значения (для перемещения окна влево и вверх). win.moveTo(x,y) Переместить окно на координаты экрана (x,y) . win.resizeBy(width,height) Изменить размер окна на указанные значения width/height относительно текущего размера. Допустимы отрицательные значения. win.resizeTo(width,height) Изменить размер окна до указанных значений.

      Также существует событие window.onresize .

      Только попапы

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

      Нельзя свернуть/развернуть окно

      Методами JavaScript нельзя свернуть или развернуть («максимизировать») окно на весь экран. За это отвечают функции уровня операционной системы, и они скрыты от фронтенд-разработчиков.

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

      Прокрутка окна

      Мы уже говорили о прокрутке окна в главе Размеры и прокрутка окна.

      win.scrollBy(x,y) Прокрутить окно на x пикселей вправо и y пикселей вниз относительно текущей прокрутки. Допустимы отрицательные значения. win.scrollTo(x,y) Прокрутить окно до заданных координат (x,y) . elem.scrollIntoView(top = true) Прокрутить окно так, чтобы elem для elem.scrollIntoView(false) появился вверху (по умолчанию) или внизу.

      Также существует событие window.onscroll .

      Установка и потеря фокуса

      Теоретически, установить попап в фокус можно с помощью метода window.focus() , а убрать из фокуса – с помощью window.blur() . Также существуют события focus/blur , которые позволяют отследить, когда фокус переводится на какое-то другое окно.

      Раньше на «плохих» сайтах эти методы могли становиться средством манипуляции. Например:

      window.onblur = () => window.focus();

      Когда пользователь пытается перевести фокус на другое окно, этот код возвращает фокус назад. Таким образом, фокус как бы «блокируется» в попапе, который не нужен пользователю.

      Из-за этого в браузерах и появились ограничения, которые препятствуют такого рода поведению фокуса. Эти ограничения нужны для защиты пользователя от назойливой рекламы и «плохих» страниц, и их работа различается в зависимости от конкретного браузера.

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

      Но всё-таки иногда методы фокусировки бывают полезны. Например:

      • Когда мы открываем попап, может быть хорошей идеей запустить для него newWindow.focus() . Для некоторых комбинаций браузера и операционной системы это устранит неоднозначность – заметит ли пользователь это новое окно.
      • Если нужно отследить, когда посетитель использует веб-приложение, можно отслеживать window.onfocus/onblur . Это позволит ставить на паузу и продолжать выполнение анимаций и других интерактивных действий на странице. При этом важно помнить, что blur означает, что окно больше не в фокусе, но пользователь может по-прежнему видеть его.

      Итого

      Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, а показать – в элементе , расположенным над страницей ( z-index ). Ещё одна альтернатива – тег .

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

      • Новое окно можно открыть с помощью вызова open(url, name, params) . Этот метод возвращает ссылку на это новое окно.
      • По умолчанию браузеры блокируют вызовы open , выполненные не в результате действий пользователя. Обычно браузеры показывают предупреждение, так что пользователь всё-таки может разрешить вызов этого метода.
      • Вместо попапа открывается вкладка, если в вызове open не указаны его размеры.
      • У попапа есть доступ к породившему его окну через свойство window.opener .
      • Если основное окно и попап имеют один домен и протокол, то они свободно могут читать и изменять друг друга. В противном случае, они могут только изменять положение друг друга и взаимодействовать с помощью сообщений.

      Чтобы закрыть попап: метод close() . Также попап может закрыть и пользователь (как и любое другое окно). После закрытия окна свойство window.closed имеет значение true .

      • Методы focus() и blur() позволяют установить или убрать фокус с попапа. Но работают не всегда.
      • События focus и blur позволяют отследить получение и потерю фокуса новым окном. Но, пожалуйста, не забывайте, что окно может остаться видимым и после blur .

      Способы создания окон PopUp

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

      Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.

      Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

      Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.

      Вконтакте

      Facebook

      Twitter

      Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

      Постановка задачи(ТЗ)

      Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

      Решение
      Способ 1
      html
       
      Sample Text
       
       
      Text in Popup
      css
      * < font-family: Areal; >.b-container < width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; >.b-popup < width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; >.b-popup .b-popup-content
      Результат:

      Очень часто предлагают использовать:

      position:absolute;

      Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.

      Способ 2

      Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

      Html (без изменений)
       
      Sample Text
       
       
      Text in Popup
      Css
      * < font-family: Areal; >.b-container < width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; >.b-popup < width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; >.b-popup .b-popup-content
      Результат аналогичный

      Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

      Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

      Добавление магии на Jquery

      Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

      Для этого необходимо подключить библиотеку JQuery и небольшой скрипт: