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

Добавил пользователь Alex
Обновлено: 05.10.2024

Всплывающее (модальное) окно – англ. pop-up – удобный и простой способ вывести какую-то информацию в небольшом отдельном окне, при этом не перегружая основную страницу.
Сами всплывающие окна могут быть очень разными. Можно вывести отдельную целую страницу своего сайта, а можно вывести небольшую текстовую информацию.

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

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

Для создания лучше пользоваться отдельным 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 >

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

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');" >

Синтаксис window.open

Открытие окна происходит с помощью javascript метода window.open.

window.open ( ‘Ссылка_на_файл_окна’ , ‘Имя_окна’ , ‘Параметры_окна’ ) Ссылка_на_файл_окна – полный путь к Вашему файлу всплывающего, который Вы недавно загрузили на свой сайт.
Имя_окна – имя окна.
Параметры окна (атрибуты) – с помощью атрибутов можно редактировать сам вид кона и его положение на экране. Все атрибуты пишутся через запятую и находятся внутри одинарных кавычек. После атрибута ставится знак = и пишется значение атрибута: цифры или же yes/no.

Например, в коде предоставленном мною окна такие атрибуты:
width=845 (ширина окна)
height=400 (высота окна)
status=no (строку состояния НЕ отображать)
toolbar=no (панель инструментов НЕ отображать)
menubar=(меню НЕ отображать)
scrollbars=yes (отображать полосы прокрутки)
resizable=yes (разрешать пользователю менять размер окна)

Атрибуты всплывающего окна

Атрибут NN IE – Описание
alwaysLowered – Окно всегда над другими
alwaysRised – Окно всегда под другими
channelMode – Показывать содержимое на панели каналов
copyhistory – Перенести новое окно в историю из текущего
dependent – Дочернее окно закроется при закрытии родительского
directories – Показать в новом окне кнопки папок
fullscreen – Не отображать заголовок и меню
height – Размер содержимого окна в пикселях
hotkeys – Отключить клав. сокращения (кроме Quit и Sequrity Info)
innerHeight – Высота содержимого.
innerWidth – Ширина содержимого.
left – Смещение левой границы окна относительно границы экрана
location – Отображать поле адреса
menubar – Отображать меню
outerHeight – Наружная ширина окна
outerWidth – Наружная ширина окна
resizeble – Разрешать польз. менять размер окна
screenX – Смещение левой границы окна от границы экрана
screenY – Смещение верхней границы окна от границы экрана
scrollbars – Отображать полосы прокрутки
status – Отображать строку состояния
titlebar – Отображать строку меню.
toolbar – Отображать панель инструментов
top – Смещение верхней границы окна относительно границы экрана
width – Ширина содержимого.
z-lock – Новое окно фикс. под прочими окнами.

Скрипт вплывающего окна

Окно, которое рассмотрено в этой статье, можно разместить на странице и с помощью полноценного скрипта.

Создание плавно всплывающего окна с использованием библиотеки jQuery

В HTML создадим ссылку, блок для контента, крестик для закрытия окна и оверлей для затемнения.

Стилизуем всплывающее окно: зададим ему ширину, высоту, цвет, спозиционируем по центру экрана.

Стили кнопки закрытия окна: зададим размеры и спозиционируем в правом верхнем углу.

Стилизуем затемнение экрана: расположим затемнение на весь экран, цвет чёрный с непрозрачностью 70% и z-index, меньшим, чем у всплывающего окна, чтобы затемнение не перекрывало само окно

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

Вы можете создать три различных типа диалоговых окон: окна предупреждения (alert), подтверждения (confirm) и приглашения (prompt).

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

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

Создание диалогового окна Alert

Вы можете создавать диалоговые окна предупреждений с помощью метода alert() . Вы уже видели много подобных примеров в предыдущих главах. Давайте посмотрим на еще один пример:

Создание диалогового окна Confirm

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

Создание диалогового окна Prompt

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

В следующем примере будет напечатано введенное вами значение при нажатии кнопки ОК.

Поэтому, если вы хотите использовать возвращаемое значение в качестве числа, вы должны скрыть его или привести к числовому значению, например: var age = Number(prompt("What's your age?"));

Чтобы отобразить разрывы строк внутри диалоговых окон, используйте символ новой строки или перевод строки ( \n ); обратный слеш, за которым следует символ n.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

17 декабря, 2019
12-17 мин.
63

Руководство по массивам в JavaScript

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Осваивайте профессию, начните зарабатывать, а платите через год!

Курсы Python Акция! Бесплатно!

Станьте хакером на Python за 3 дня

Веб-вёрстка. CSS, HTML и JavaScript

Курс Bootstrap 4

Станьте веб-разработчиком с нуля

Метод alert()

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

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

На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.

Метод confirm()

Синтаксис применения метода confirm() имеет следующий вид:

result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

Метод prompt()

Синтаксис применения метода prompt имеет следующий вид:

Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример:

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