Как сделать всплывающее окно в html при нажатии на кнопку
Добавил пользователь Евгений Кузнецов Обновлено: 05.10.2024
На сегодняшний день в Интернете для выполнения многих действий требуется получение подтверждения от пользователя. Например, когда пользователям нужно удалить учетную запись, изменить логин или подтвердить денежный перевод.
В таких случаях чаще всего используется диалоговое окно с двумя кнопками: одна для отмены действия, вторая — для подтверждения. В течение многих лет мы использовали для этого библиотеки JavaScript . Но в этой статье мы попробуем сделать это с помощью экспериментального тега .
Применение элемента dialog
является элементом HTML5 . Он классифицируется как « корневой элемент секционирования «, подобный , и , каждый из которых устанавливает новый раздел контента. Вы можете использовать его как дочерний элемент , или вложить его в такие элементы, как
Поддерживающие браузеры ( Chrome 37+ и Opera 27+ ) выводят элемент по умолчанию скрытым. Он становится видимым только по запросу с использованием методов JavaScript show() или showModal() , метод close() снова скрывает элемент. Как правило, мы запускаем эти методы внутри события click , например, следующим образом:
Метод show() против метода showModal()
Стоит отметить, что методы show() и showModal() характеризуются различным поведением.
Метод show() выводит элемент в соответствии с его положением внутри DOM . Если вы добавили его непосредственно перед закрывающимся тегом
От автора: всплывающее окно для сайта это вещь, которую многие пользователи от души ненавидят. Но все же если использовать его с разрешения самого пользователя, то это превращается в достаточно интересный элемент сайта. В этой статье я как раз я расскажу вам о трех способах, как сделать всплывающее окно.
Способ №1 – на чистом html5 и javascript
Как ни странно, сегодня такое окно можно сделать без всяких jquery плагинов. Для этого нам потребуется элемент из html5 – dialog.
Чем будет хорошо этот способ? Во-первых, блок открывается только по желанию пользователя. То есть только в том случае, если он сам нажмет на кнопку. Также он в любое время может закрыть окошко и никогда больше его не открывать. Естественно, это только разметка, чтобы все работало, нужно добавить еще javascript. В разметке в контейнере dialog может быть все, что угодно: картинки, таблицы, видео и т.д. Абзац там только для примера.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Обязательно во всплывающем окне должна быть кнопка его закрытия. Хорошо, с разметкой разобрались, а вот и скрипт:
Всплывающее (модальное) окно – англ. 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 – Новое окно фикс. под прочими окнами.
Скрипт вплывающего окна
Окно, которое рассмотрено в этой статье, можно разместить на странице и с помощью полноценного скрипта.
Хотите разместить форму ClickDimensions на вашем сайте, но надо сделать ее всплывающей поверх страницы после нажатия кнопки? Читайте нашу статью о том, как это сделать!
Настройка формы под модальный режим потребует использования HTML, CSS и JavaScript на вашем сайте. Необходимо будет добавить код формы (iFrame или виджет) в HTML, чтобы отобразить это была pop-up форма по нажатию кнопки.
Приведенные ниже коды представляют собой примеры настройки. Структура важна для последующего использования, но для некоторого контента, особенно для CSS, примеры являются лишь базовой отправной точкой, например, стиль может быть скорректирован по мере необходимости и требований вашей компании.
Примечание. ClickDimensions не обеспечивает и не несет ответственности за поддержку настраиваемого кода.
HTML
В компоненте HTML вы устанавливаете фактическое содержание модального диалога (всплывающей формы). Единственное, что мы будем здесь определять, это кнопка, которая открывает модальный диалог и div, содержащий необходимый нам контент. Этот HTML должен быть добавлен на web-страницу, на которой будет вызываться форма при нажатии на кнопку.
CSS
CSS используется для управления визуальным стилем отображаемой pop-up формы. В зависимости от того, как ваш сайт обрабатывает стили, его, возможно, необходимо добавить в заголовок страницы в виде внутренней таблицы стилей или добавить в отдельную внешнюю таблицу стилей для всего сайта. Конкретный стиль, представленный ниже, является лишь примером и может быть изменен или расширен в соответствии с конкретными потребностями.
JavaScript
// Объявить переменную модального окна в текущей области видимости
var modal = document.getElementById(‘myModal’);
// Переменная кнопки, открывающей модальное окно
var btn = document.getElementById(“myBtn”);
// Получение элемента , который закрывает модальное окно
var span = document.getElementsByClassName(“close”)[0];
// Когда пользователь нажимает кнопку, открывается pop-up форма
btn.onclick = function() <
modal.style.display = “block”;
>
// Когда пользователь нажимает кнопку (x) , закрывается окно формы
span.onclick = function() <
modal.style.display = “none”;
>
// Когда пользователь нажимает в любое место вне формы, закрыть окно формы
window.onclick = function(event) <
if (event.target == modal) <
modal.style.display = “none”;
>
>
Вот и все! Надеемся, что данная статья поможет вам реализовать открытие форм или опросов ClickDimensions в отдельном окне по нажатию кнопки на сайте, это бывает полезно для некоторых отдельных случаев и позволяет визуально не засорять страницы и не отображать часть форм по умолчанию.
Читайте также: