| Kosten | Четверг, 07 Ноября 2019, 23:13 | Сообщение 1 |
| Всплывающие окна не всегда желательны, где скорее всего они не одобряются многими. Из-за того, что они печально известны тем, что используются для открытия рекламы. Однако может возникнуть реальная необходимость открытия ссылок во всплывающем окне в веб-приложениях.
В этом посте я покажу, как мы можем легко определить поведение щелчка по ссылкам, чтобы открыть их во всплывающем окне, а также некоторые параметры настройки, такие как изменение размера всплывающего окна.
Открыть ссылку во всплывающем окне
Обычно ссылки открываются в том же окне, в котором они нажаты. Чтобы открыть их в новом окне, мы добавляем target="_blank"атрибут к ссылкам. Однако, чтобы открыть ссылки в отдельном всплывающем окне, мы можем использовать это onclick свойство и указать встроенный код JavaScript, window.openкак показано ниже.
HTML + JavaScript код для всплывающих окон
Код <a href="http://zornet.ru"
target="popup"
onclick="window.open('http://zornet.ru','popup','width=590,height=595'); return false;">
Open Link in Popup
</a>
Здесь мы просим браузер добавить наш встроенный код JavaScript в поведение щелчка ссылки, указав onclickатрибут. Мы передаем URL, который будет открыт во всплывающем окне, вместе с шириной и высотой всплывающего окна, которое мы хотим создать. Добавляя, return falseмы гарантируем, что действие щелчка по умолчанию не выполняется.
Демо всплывающего окна
Нажмите на кнопку ниже, чтобы увидеть приведенный выше код в действии. Должно быть создано всплывающее окно размером 590×595, которое должно открыть указанную нами ссылку.
Хотя этот вид всплывающих окон не должен блокироваться браузером, поскольку мы открываем только одно новое окно по щелчку пользователя, однако, если ваш браузер чрезмерно агрессивен в блокировании всплывающих окон, вам может потребоваться временно отключить блокировщик всплывающих окон.
Отключить изменение размера и прокрутку во всплывающем окне
Чтобы отключить изменение размера и прокрутку во всплывающем окне, укажите resizable=no и scrollbars=no.
Открыть ссылку в новом окне против всплывающего окна
Прежде чем вы начнете сходить с ума от всплывающих окон, уделите немного времени, чтобы решить, действительно ли вы хотите принять всплывающее окно по сравнению с открытием ссылок в новом окне.
Ссылку можно открыть в новом окне или в новой вкладке, просто добавив target="_blank"атрибут к ссылкам, как показано ниже. Эти виды ссылок никогда не блокируются блокировщиком всплывающих окон при открытии.
Код <a href="http://zornet.ru/load/5_krasivykh_ehffektov_navedenija_knopok/145-1-0-9960" target="_blank">Открыть ссылку в новом окне</a>
В заключение я хотел бы повторить, что если у вас нет очень конкретной причины, следует избегать как можно большего открытия ссылок во всплывающем окне. Но когда вам действительно нужно это сделать, открывайте только одну ссылку за раз и отключайте поведение ссылок по умолчанию, чтобы избежать блокировщиков всплывающих окон и повысить удобство работы для пользователя.
| | Страна: (RU) |
| |
