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

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

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

• Google Chrome.
• Mozilla Firefox.
• Apple Safari.
• Microsoft Edge.

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

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

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

Посмотрите, как будет выглядеть такая конструкция. К ссылке всего лишь необходимо добавить атрибут onclick.

Давайте попробую объяснить что же это такое. Этот код представляет собой гиперссылку, которая при нажатии на неё открывает всплывающее окно с веб-страницей https://hoboweb.ru/vsplyvayushhie-okna-v-yandeks-brauzere/.

Атрибут href указывает на адрес, куда должна вести ссылка. Атрибут target определяет, как будет открыта страница. В данном случае установлено значение «popup», что означает, что страница будет открыта в новом окне.

Атрибут onclick содержит JavaScript-код, который запускается при нажатии на ссылку. В данном случае этот код открывает новое окно с заданными параметрами при помощи функции window.open(). Ну а текст «Открой меня!» представляет собой отображаемый текст ссылки.

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

Когда пользователь нажимает на ссылку, браузер выполняет все действия, указанные в атрибуте onclick и затем пытается перейти по адресу, указанному в атрибуте href.

Таким образом, return false в данном случае останавливает выполнение действия по умолчанию, то есть переход по ссылке, после выполнения JavaScript-кода из атрибута onclick.

Посмотрите ДЕМО всплывающего окна. Его параметры: width=500, height=500.

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

Всем WEB!