Javascript сделать окно активным

Обновлено: 15.05.2024

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

Проверить, находится ли окно в фокусе, а также перевести внимание посетителя на него – сложно.

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

Но кое-что сделать, конечно, можно. Об этом и поговорим.

Метод window.focus

Метод window.focus позволяет сфокусироваться на окне. Он работает по-разному в разных ОС и браузерах.

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

Можно подумать, что окно будет оказываться в фокусе раз в секунду. Но это не так.

Произойдёт одно из трёх:

Вообще никакого эффекта. Самый распространённый случай, если в окне много вкладок.
Окно развернётся (при необходимости) и выйдет на передний план. Обычно это происходит, когда метод window.focus() вызывается для попапа, а активно сейчас – главное окно. То есть, в этом случае вызов сработает.
Заголовок окна начнёт мигать. Чтобы увидеть это в действии – откройте данную страницу в IE, запустите код и переключитесь на другое окно. Браузер попытается привлечь Ваше внимание миганием/мерцанием заголовка окна.

Мерцание заголовка

В дополнение к window.focus() используют мерцание заголовка окна, как показано в примере ниже:

Запустите код и сверните всплывающее окно. А затем – нажмите кнопку с надписью «getAttention(win)». Браузер будет привлекать ваше внимание, как умеет ;)

Обратите внимание: в коде есть проверка на win.closed . Попытка манипулирования закрытым окном вызовет исключение.

Как только посетитель сфокусировался на окне индикация прекращается. Для определения момента фокусировки в примере выше используется событие document.onmousemove .

Можно было использовать событие window.onfocus , но, оказывается, оно ненадёжно.

Событие window.onfocus

Вот переписанный вариант функции getAttention(win) , с использованием события onfocus :

Далее мы посмотрим случаи, когда он не срабатывает, и почему нам всё же нужно document.onmousemove .

Когда событие onfocus не работает?

Возможно такое, что посетитель переключается на окно, а window.onfocus не происходит.

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

Попробуйте проделать следующее:

Запустите пример с getAttention в Chrome или IE (кстати, в них нельзя отключить адресную панель).
Поместите курсор в панель адреса всплывающего окна.
Перейдите обратно к главному окну и нажмите кнопку getAttention(win)

Вы увидите, что несмотря на то, что вы переключились на окно, и оно сейчас на переднем плане, событие onfocus не срабатывает.

Есть и другие случаи, когда переключение между окнами не вызывает window.onfocus . Скажем, если окно сфокусировать щелчком в поле ввода формы, то в IE события window.onfocus (а также window.onfocusin ) – не сработают!

Можно попробовать поймать момент фокусировки и по-другому, повесив дополнительные обработчики событий на document . В главе Фокусировка: focus/blur описана техника делегирования для focus/blur .

Но этот способ получает фокус только если посетитель сфокусируется где-то в документе: щёлкнет или сделает ещё какое-то действие в документе, а не просто посмотрит на него и проведёт над ним мышкой.

Впрочем, никто не мешает использовать сочетание всех описанных методов.

Итого

Фокусировка и привлечение внимания к окну:

Метод focus для window не надёжен. Окнами и вкладками браузера можно уверенно управлять только на уровне ОС.

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

Обнаружение переключения на окно:

У window есть событие onfocus , но оно также ненадёжно.

Поэтому для определения переключения на окно – используйте его вместе с делегируемым focus на документе, а также document.onmousemove .

Методы объекта window: open(), close(), print(), focus() и blur()

В этом разделе мы рассмотрим следующие методы объекта window :

open() - предназначен для открытия окон (вкладок);
close() - предназначен для закрытия окон. В основном используется для закрытия окон открытых методом open() ;
print() - предназначен для печати содержимого окна;
focus() - предназначен для передачи фокусу указанному окну;
blur() - предназначен для удаления фокуса с указанного окна.

Открытие нового окна или вкладки

В JavaScript открыть новое окно или вкладку из существующего документа можно с помощью метода « window.open ».

url – адрес ресурса, который необходимо загрузить в это окно или вкладку (если в качестве url указать пустую строку, то туда будет загружена пустая страница «about:blank»);
windowName – имя окна;
windowFeature – необязательный параметр для настройки свойств окна (они указываются в формате «свойство=значение» через запятую и без пробелов).

Настройки окна windowFeature :

Настройки menubar , toolbar , location , resizable , scrollbars , status является логическими, если их нужно включить, то устанавливаем значение true , в противном случае – false .

Рассмотрим следующий примеры:

1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:

2. Открыть веб-страницу "http://itchief.ru/" в текущем окне:

3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

Как взаимодействовать с окном после его открытия

Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

Например, для того чтобы обратиться к объекту document открытого окна:

Открыть пустое новое окно и вывести в ней некоторый текст:

Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.

Метод close()

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open() . В противном случае, когда Вы попытаетесь закрыть окно (вкладку), открытое самим пользователем (не из JavaScript), то браузер из-за соображений безопасности запросит у пользователя подтверждение на выполнение этого действия.

Например, cоздадим кнопки для открытия и закрытия окна с именем myWindow :

Метод print()

Он предназначен для печати содержимого окна. Данный метод не имеет параметров.

Метод focus()

Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.

Метод blur()

Он предназначен, чтобы убрать фокус с указанного окна, т.е. перемещает его на задний план. Данный метод не имеет параметров.

Свойства объекта window: name, opener, closed

В этом разделе рассмотрим следующие свойства объекта window :

name — предназначено для получения или установления внутреннего имени окна;
opener - позволяет получить в текущем окне, ссылку на окно (объект window ), с которого было открыто данное окно;
closed - свойство логического типа, которое возвращает: true , если окно закрыто и false , если окно открыто.

Свойство name

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

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

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target , Если элемент а имеет атрибут target="searchWindow" , то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем ( searchWindow ), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow . А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

Например, откроем страницу "http://www.google.com/" в окне, имеющем имя myWindow :

Например, откроем окно с помощью метода open() и выведем в нём его имя:

Свойство opener

Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window ), т.е. на окно из которого было открыто данное окно.

Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).

Свойство closed

Свойство closed возвращает логическое значение, указывающее закрыто окно или нет.

Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).

События мыши

mousedown – при нажатии кнопки мыши;
mouseup – при отпускании кнопки мыши;
click – при клике (порядок возникновения событий при click : mousedown -> mouseup -> click );
dblclick – при двойном клике (порядок возникновения событий при dblclick : mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick );
mousemove – при перемещении курсора мыши;
mouseover – при вхождении курсора мыши в область, принадлежащей целевому элементу и других элементов, вложенных в него;
mouseenter – при вхождении указателя мыши в целевой элемент (в отличие от mouseover происходит только один раз при вхождении курсора в целевой элемент; при дальнейшем движении курсора и его вхождении в другие элементы (находящихся в целевом) – оно больше не возникает);
mouseout – при уходе курсора с целевого элемента и других элементов, вложенных в него;
mouseleave – при покидании границ целевого элемента (в отличие от mouseout не возникает при покидании курсора элементов вложенных в целевой);
contextmenu – при открытии контекстного меню.

События при CSS переходе

transitionrun – возникает при создании CSS перехода (т.е. когда он добавляется к набору запущенных переходов, но не обязательно он начался);
transitionstart – происходит, когда CSS переход начинает выполняться;
transitioncancel – возникает, если CSS переход был отменен;
transitionend – происходит при завершении CSS перехода.

События при CSS анимации

animationstart – происходит, когда CSS анимация начинается;
animationiteration – возникает, когда заканчивается одна итерация CSS анимации и начинается другая;
animationend – происходит при окончании CSS анимации.

События клавиатуры

Порядок возникновения событий: keydown -> keypress -> keyup .

keydown - событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
keyup - событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
keypress - событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.

События объектов и фреймов

События формы и элементов управления

События перетаскивания

События, связанные с перетаскиваемым объектом (draggable target, исходный объект):

dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
drag – событие происходит, когда пользователь перетаскивает элемент;
dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.

События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):

dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
dragover - событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
drop - событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.

События буфера обмена

сopy - событие происходит, когда пользователь копирует содержимое элемента. Событие copy также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элемента img ). Событие copy используется в основном для элементов input с type="text" .
сut - событие происходит, когда пользователь вырезает содержимое элемента.
paste - событие происходит, когда пользователь вставляет некоторое содержимое в элемент.

События печати

afterprint - событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки "Печать" в диалоговом окне) или если диалоговое окно "Печать" было закрыто.
beforeprint - событие возникает перед печатью страницы, т.е. до открытия диалогового окна "Печать".

События, посылаемые сервером

События мультимедиа

В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойства окна:

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

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

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

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

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

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

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

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

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

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

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

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

Большинство действий, особенно получение содержимого окна и его переменных, возможны лишь в том случае, если 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" в ссылках или формах. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.

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

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

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

Изображение модального окна:

Оно состоит из заголовка (хедера), основной части и футера.

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

Загрузка и установка модального окна

Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

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

Как создать и вызвать модальное окно

Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.

Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :

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

Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.

Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

Пример создания модального окна с настройками по умолчанию:

Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

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

В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

show – для отображения модального окна;
hide – для скрытия модального окна;
destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
setContent – для установки контента;
setTitle – для установки заголовка.

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

Рассмотрим, как работать с этими методами на примерах.

Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

Метод hide применяется для его скрытия:

Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

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

Примеры использования скрипта для создания модальных окон

1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle="modal" ):

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

4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:

5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

Пример содержимого файла «json-1»:

7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции $modal :

В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .

В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .

Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :

Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах - false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

Читайте также: