Window.open js

Самый простой способ установки всплывающего окна – ссылка

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

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

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

<a href=»javascript:void(0)» onClick=»javascript:window.open(‘http://Ссылка_на_файл_окна’, ‘okno’, ‘width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes’);»> Открыть «Мое всплывающее окно»</a>

1	<ahref=»javascript:void(0)»onClick=»javascript:window.open(‘http://Ссылка_на_файл_окна’, ‘okno’, ‘width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes’);»>Открыть»Мое всплывающее окно»</a>

Вот пример моего кода, примененного на этой странице:

<a href=»javascript:void(0)» onClick=»javascript:window.open(‘https://stepfor.top/Pages/Vsplivaushee_okno.html’, ‘okno’, ‘width=400,height=300,left=250, top=100,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes’);»>
Открыть «Мое всплывающее окно»</a>

1 2	<ahref=»javascript:void(0)»onClick=»javascript:window.open(‘https://stepfor.top/Pages/Vsplivaushee_okno.html’, ‘okno’, ‘width=400,height=300,left=250, top=100,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes’);»> Открыть»Мое всплывающее окно»</a>

А вот собственно и результат Открыть “Мое всплывающее окно”

Открытие и закрытие окон

Открыть новое окно веб-браузера (или вкладку, что обычно зависит от настроек браузера) можно с помощью метода open() объекта Window. Метод Window.open() загружает документ по указанному URL-адресу в новое или в существующее окно и возвращает объект Window, представляющий это окно. Он принимает четыре необязательных аргумента:

Первый аргумент open() — это URL-адрес документа, отображаемого в новом окне. Если этот аргумент отсутствует (либо является пустой строкой), будет открыт специальный URL пустой страницы about:blank.

Второй аргумент open() — это строка с именем окна. Если окно с указанным именем уже существует (и сценарию разрешено просматривать содержимое этого окна), используется это существующее окно. Иначе создается новое окно и ему присваивается указанное имя. Если этот аргумент опущен, будет использовано специальное имя «_blank», т.е

будет открыто новое неименованное окно.
Обратите внимание, что сценарии не могут просто так указывать имена окон и не могут получать контроль над окнами, используемыми другими веб-приложениями: они могут указывать имена только тех существующих окон, которыми им «разрешено управлять» (термин взят из спецификации HTML5). Проще говоря, сценарий может указать имя существующего окна, только если это окно содержит документ, происходящий из того же источника, или если это окно было открыто самим сценарием (или рекурсивно открытым окном, которое открыло это окно).
Кроме того, если одно окно является фреймом, вложенным в другое окно, сценарии в любом из них получают возможность управлять другим окном

В этом случае можно использовать зарезервированные имена «_top» (для обозначения вмещающего окна верхнего уровня) и «_parent» (для обозначения ближайшего вмещающего окна).

Третий необязательный аргумент open() — это список параметров, определяющих размер и видимые элементы графического пользовательского интерфейса нового окна. Если опустить этот аргумент, окно получает размер по умолчанию и полный набор графических элементов: строку меню, строку состояния, панель инструментов и т.д. В браузерах, поддерживающих вкладки, это обычно приводит к созданию новой вкладки. Этот третий аргумент является нестандартным, и спецификация HTML5 требует, чтобы браузеры игнорировали его.
Указывать четвертый аргумент open() имеет смысл, только если второй аргумент определяет имя существующего окна. Этот аргумент — логическое значение, определяющее, должен ли URL-адрес, указанный в первом аргументе, заменить текущую запись в истории просмотра окна (true) или требуется создать новую запись (false). Если этот аргумент опущен, используется значение по умолчанию false.

Значение, возвращаемое методом open(), является объектом Window, представляющим вновь созданное окно. Этот объект позволяет сослаться в JavaScript-коде на новое окно так же, как исходный объект Window ссылается на окно, в котором выполняется сценарий:

В окнах, созданных методом window.open(), свойство opener ссылается на объект Window сценария, открывшего его. В других случаях свойство opener получает значение null:

Метод Window.open() часто используется рекламодателями для создания «всплывающих окон» с рекламой, когда пользователь путешествует по Всемирной паутине. Такие всплывающие окна могут раздражать пользователя, поэтому большинство веб-браузеров реализуют механизм блокирования всплывающих окон. Обычно вызов метода open() преуспевает, только если он производится в ответ на действия пользователя, такие как щелчок мышью на кнопке или на ссылке. Попытка открыть всплывающее окно, которая производится, когда браузер просто загружает (или выгружает) страницу, как в приведенном примере, обычно оканчивается неудачей.

Новое окно открывается при помощи метода open() и закрывается при помощи метода close(). Если объект Window был создан сценарием, то этот же сценарий сможет закрыть его следующей инструкцией:

Всплывающее окно на Jquery

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

Прежде всего вам необходимо будет подключить библиотеку Jquery, но перед этим желательно проверить не подключена ли она уже у вас, так как скорее все подключена. Если все таки нужно ее подключить, то между тегами <head> и </head> нужно вставить следующий код:

1	<script src=»http://code.jquery.com/jquery-2.0.2.min.js»></script>

HTML

<!—HTML всплывающего окна на Jquery—>
<a href=»javascript:PopUpShow()»>НАЖМИ, ЧТОБЫ ОТКРЫТЬ ВСПЛЫВАЮЩЕЕ ОКНО</a>

Информация для отображения во сплывающем окне
<a href=»javascript:PopUpHide()»>Закрыть окно</a>
</div>
</div>

<!—САМ СКРИПТ ОКНА—>
<script>
$(document).ready(function(){
//Скрыть PopUp при загрузке страницы
PopUpHide();
});
//Функция отображения PopUp
function PopUpShow(){
$(«#popup1»).show();
}
//Функция скрытия PopUp
function PopUpHide(){
$(«#popup1»).hide();
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!—HTMLвсплывающегоокнанаJquery—>

<ahref=»javascript:PopUpShow()»>НАЖМИ,ЧТОБЫОТКРЫТЬВСПЛЫВАЮЩЕЕОКНО</a>

Информациядляотображениявосплывающемокне

<ahref=»javascript:PopUpHide()»>Закрытьокно</a>

</div>

<!—САМСКРИПТОКНА—>

$(document).ready(function(){

//Скрыть PopUp при загрузке страницы

PopUpHide();

});

//Функция отображения PopUp

functionPopUpShow(){

$(«#popup1»).show();

}

//Функция скрытия PopUp

functionPopUpHide(){

$(«#popup1»).hide();

}

</script>

Также этот вариант еще примечателен тем, что если вы не будете применять CSS стили, ваше всплывающее окно превратится в спойлер! Так что, если вы хотите все-таки, чтобы у вас был не спойлер, а полноценное всплывающее окно, добавьте на сайт следующие CSS стили.

/*Всплывающее окно на jquery */
.b-popup{
width:100%;
min-height:100%;
background-color: rgba(0,0,0,0.5);
overflow:hidden;
position:fixed;
top:0px;
left: 0px;
}
.b-popup .b-popup-content{
margin:200px auto 0px auto;
height:100%;
max-width:500px;
max-height: 375px;
padding:10px;
background-color: #ffffff;
border-radius:5px;
box-shadow: 0px 0px 10px #000;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*Всплывающее окно на jquery */

.b-popup{

width100%;

min-height100%;

background-colorrgba(,,,0.5);

overflowhidden;

positionfixed;

top0px;

left0px;

}

.b-popup.b-popup-content{

margin200pxauto0pxauto;

height100%;

max-width500px;

max-height375px;

padding10px;

background-color#ffffff;

border-radius5px;

box-shadow0px0px10px#000;

}

Адрес документа и навигация по нему

Свойство location объекта Window ссылается на объект Location, представляющий текущий URL-адрес документа, отображаемого в окне и определяющий методы, инициирующие загрузку нового документа в окно.

Свойство location объекта Document также ссылается на объект Location:

Кроме того, объект Document имеет свойство URL, хранящее статическую строку с адресом URL документа. При перемещении по документу с использованием идентификаторов фрагментов (таких как «#table-of-contents») внутри документа объект Location будет обновляться, отражая факт перемещения, но свойство document.URL останется неизменным.

Анализ URL

Свойство location окна является ссылкой на объект Location и представляет URL-адрес документа, отображаемого в данный момент в текущем окне. Свойство href объекта Location — это строка, содержащая полный текст URL-адреса. Метод toString() объекта Location возвращает значение свойства href, поэтому в контекстах, где неявно подразумевается вызов метода toString(), вместо конструкции location.href можно писать просто location.

Другие свойства этого объекта, такие как protocol, host, hostname, port, pathname, search и hash, определяют отдельные части URL-адреса. Они известны как свойства «декомпозиции URL» и также поддерживаются объектами Link (которые создаются элементами <a> и <area> в HTML-документах).

Свойства hash и search объекта Location представляют особый интерес. Свойство hash возвращает «идентификатор фрагмента» из адреса URL, если он имеется: символ решетки (#) со следующим за ним идентификатором. Свойство search содержит часть URL-адреса, следующую за вопросительным знаком, если таковая имеется, включая сам знак вопроса. Обычно эта часть URL-адреса является строкой запроса. В целом эта часть URL-адреса используется для передачи параметров и является средством встраивания аргументов в URL-адрес.

Хотя эти аргументы обычно предназначены для сценариев, выполняющихся на сервере, нет никаких причин, по которым они не могли бы также использоваться в страницах, содержащих JavaScript-код. В примере ниже приводится определение универсальной функции urlArgs(), позволяющей извлекать аргументы из свойства search URL-адреса. В примере используется глобальная функция decodeURIComponent(), имеющаяся в клиентском JavaScript:

Загрузка нового документа

Метод assign() объекта Location заставляет окно загрузить и отобразить документ по указанному URL-адресу. Метод replace() выполняет похожую операцию, но перед открытием нового документа он удаляет текущий документ из списка посещавшихся страниц.

Когда сценарию просто требуется загрузить новый документ, часто предпочтительнее использовать метод replace(), а не assign(). В противном случае кнопка Back (Назад) браузера вернет оригинальный документ и тот же самый сценарий снова загрузит новый документ. Метод location.replace() можно было бы использовать для загрузки версии веб-страницы со статической разметкой HTML, если сценарий обнаружит, что браузер пользователя не обладает функциональными возможностями, необходимыми для отображения полноценной версии:

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

Кроме методов assign() и replace() объект Location определяет также метод reload(), который заставляет браузер перезагрузить документ. Однако более традиционный способ заставить браузер перейти к новой странице заключается в том, чтобы просто присвоить новый URL-адрес свойству location:

Всё дело — в CSS

Чтобы компьютер понимал, какие элементы есть на странице, используют язык HTML, который говорит: «Тут заголовок, тут ссылка, тут обычный текст, тут картинка». А чтобы было ясно, как эти элементы должны выглядеть и работать, используют специальные правила — их называют стилями. Стили задают цвет и внешний вид всего, что есть на странице, а ещё управляют размером и поведением каждого элемента.

Стили хранятся в таблицах, таблицы называют каскадными, всё вместе называется CSS — cascading style sheets.

Вот больше примеров и практики по CSS:

Самое простое и полезное введение в CSS.
На стиле — подборка интересных CSS-свойств.
10 полезных инструментов для создания роскошного CSS.

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

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

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

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

Свойство name

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

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

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

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

window.name = «myWindow»;

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

var wnd = window.open(«»,»myTest»,»width=200, height=300″);

wnd.document.write(«

Это окно имеет имя:» + wnd.name +».р>»);

Свойство opener

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

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

Открыть окноа>

Свойство closed

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

Oткрыть окно
3акрыть окно
Cocтояние окна

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

Сегодня и поговорим на эту тему, и я покажу простую реализацию.

Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его — уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают. Я думаю, попробовать стоит, а там, на основе статистики, и делать уже конкретные выводы относительной вашей ниши и продукта.

Открытие всплывающего окна.

Теперь необходимо на каждый элемент из коллекции повесить обработчик события. После срабатывания обработчика, мы определяем, какое именно окно должно быть открыто и запускаем функцию , которая и откроет нужный нам pop-up. Обход коллекции сделаем используя метод , а регистрацию обработчика сделаем с помощью метода :

JavaScript

for (let el of mOpen) {
el.addEventListener(‘click’, function(e) {
// используюя атрибут , определяем ID всплывающего окна,
// которое требуется открыть
// по значению ID получаем ссылку на элемент с таким идентификатором
let modalId = el.dataset.modal,
modal = document.getElementById(modalId);
// вызываем функцию открытия всплывающего окна, аргументом
// является объект всплывающего окна
modalShow(modal);
});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

for(let el of mOpen){

el.addEventListener(‘click’,function(e){

// используюя атрибут , определяем ID всплывающего окна,

// которое требуется открыть

// по значению ID получаем ссылку на элемент с таким идентификатором

let modalId=el.dataset.modal,

modal=document.getElementById(modalId);

// вызываем функцию открытия всплывающего окна, аргументом

// является объект всплывающего окна

modalShow(modal);

});

}

Рассмотрим теперь по шагам работу функции .

1
Добавляем оверлею класс . Этот класс создаёт анимацию — плавное появление подложки в течение 0.4 сек. Предварительно (если есть) удаляем класс .
2
Определяем тип анимации появления всплывающего окна. Этот тип прописан в переменой . На этапе вёрстки, необходимо в самом низу страницы, перед тегом , но выше кода подключения js-скрипта, который мы сейчас пишем, добавить одну из двух строк, которые определяют тип анимации появления всплывающего окна:

JavaScript

<script>var typeAnimate = ‘fade’;</script>
// или
<script>var typeAnimate = ‘slide’;</script>

1
2
3
4
5

<script>vartypeAnimate=’fade’;</script>

// или

<script>vartypeAnimate=’slide’;</script>

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

Полный код функции :

JavaScript

function modalShow(modal) {
// показываем подложку всплывающего окна
overlay.classList.remove(‘fadeOut’);
overlay.classList.add(‘fadeIn’);

// определяем тип анимации появления всплывающего окна
// убираем и добавляем классы, соответствующие типу анимации
if (typeAnimate === ‘fade’) {
modal.classList.remove(‘fadeOut’);
modal.classList.add(‘fadeIn’);
} else if (typeAnimate === ‘slide’) {
modal.classList.remove(‘slideOutUp’);
modal.classList.add(‘slideInDown’);
}
// выставляем флаг, обозначающий, что всплывающее окно открыто
mStatus = true;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

functionmodalShow(modal){

// показываем подложку всплывающего окна

overlay.classList.remove(‘fadeOut’);

overlay.classList.add(‘fadeIn’);

// определяем тип анимации появления всплывающего окна

// убираем и добавляем классы, соответствующие типу анимации

if(typeAnimate===’fade’){

modal.classList.remove(‘fadeOut’);

modal.classList.add(‘fadeIn’);

}elseif(typeAnimate===’slide’){

modal.classList.remove(‘slideOutUp’);

modal.classList.add(‘slideInDown’);

}

// выставляем флаг, обозначающий, что всплывающее окно открыто

mStatus=true;

}

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

Обработка ошибок

Свойство onerror объекта Window — это обработчик событий, который вызывается во всех случаях, когда необработанное исключение достигло вершины стека вызовов и когда браузер готов отобразить сообщение об ошибке в консоли JavaScript. Если присвоить этому свойству функцию, функция будет вызываться всякий раз, когда в окне будет возникать ошибка выполнения программного кода JavaScript: присваиваемая функция станет обработчиком ошибок для окна.

Исторически сложилось так, что обработчику события onerror объекта Window передается три строковых аргумента, а не единственный объект события, как в других обработчиках. (Другие объекты в клиентском JavaScript также имеют обработчики onerror, обрабатывающие различные ошибочные ситуации, но все они являются обычными обработчиками событий, которым передается единственный объект события.) Первый аргумент обработчика window.onerror — это сообщение, описывающее произошедшую ошибку. Второй аргумент — это строка, содержащая URL-адрес документа с JavaScript-кодом, приведшим к ошибке. Третий аргумент — это номер строки в документе, где произошла ошибка.

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

Обработчик onerror является пережитком первых лет развития JavaScript, когда в базовом языке отсутствовала инструкция try/catch обработки исключений. В современном программном коде этот обработчик используется редко.

Пишем JavaScript для управления всплывающими окнами с помощью CSS3.

И вот теперь мы добрались до самого главного — написания скрипта на чистом JavaScript, который будет управлять появлением и исчезновением всплывающих окон. Начнём, как обычно с ограничения области видимости и разместим скрипт в анонимной самозапускающейся функции.

JavaScript

;(function() {
‘use strict’;

})();

1
2
3
4
5
6

;(function(){

‘use strict’;

})();

Первым делом, что нам нужно сделать — это объявить несколько констант и переменных, очень важных для нормального функционирования скрипта и присвоить им значения.

JavaScript

// коллекция всех элементов на странице, которые могут открывать всплывающие окна
// их отличительной особенность является наличие атрибута »
const mOpen = document.querySelectorAll(»);
// если нет элементов управления всплывающими окнами, прекращаем работу скрипта
if (mOpen.length == 0) return;

// подложка под всплывающее окно
const overlay = document.querySelector(‘.overlay’),
// коллекция всплывающих окон
modals = document.querySelectorAll(‘.dlg-modal’),
// коллекция всех элементов на странице, которые могут
// закрывать всплывающие окна
// их отличительной особенность является наличие атрибута »
mClose = document.querySelectorAll(»);
// флаг всплывающего окна: false — окно закрыто, true — открыто
let mStatus = false;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// коллекция всех элементов на странице, которые могут открывать всплывающие окна
// их отличительной особенность является наличие атрибута »

constmOpen=document.querySelectorAll(»);

// если нет элементов управления всплывающими окнами, прекращаем работу скрипта

if(mOpen.length==)return;

// подложка под всплывающее окно

constoverlay=document.querySelector(‘.overlay’),

// коллекция всплывающих окон

modals=document.querySelectorAll(‘.dlg-modal’),

// коллекция всех элементов на странице, которые могут

// закрывать всплывающие окна

// их отличительной особенность является наличие атрибута »

mClose=document.querySelectorAll(»);

// флаг всплывающего окна: false — окно закрыто, true — открыто

let mStatus=false;

Вступление.

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

Не будем ходить вокруг да около, а сразу приступим к делу — поставим задачу, что же мы хотим получить на выходе.

Итак, давайте создадим красивые всплывающие окна с эффектами анимации: и , которые будет применяться как к подложке (overlay), так и к самому окну. Для создания эффектов анимации будем использовать исключительно CSS3.

Также я уверен, что вам приходилось сталкиваться с ситуациями, когда на одной странице могли выводиться разные всплывающие окна, содержащие, соответственно, разную информацию. Такое часто встречается в лендингах, когда в одном pop-up содержится форма заказа, а в другом предлагают ввести данные для связи с вами. Давайте и мы с вами сделаем точно также.

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

Открытие всплывающего окна. Один и тот же pop-up может открываться по клику на разные интерактивные элементы, расположенные в разных местах страницы.
Закрытие всплывающего окна. Pop-up мы будем закрывать тремя способами:
— во-первых, стандартным способом, кликом по крестику в правом верхнем углу всплывающего окна;
— во-вторых, по клику на любое место экрана вне всплывающего окна, т. е., по оверлею, который перекрывает и затеняет контент страницы и, при этом, занимает всю площадь экрана, имея ширину и высоту равные 100%;
— в-третьих, клавишей .

Итак, вроде со всем определились и давайте теперь перейдём к созданию непосредственно всплывающего окна.