| Kosten | Четверг, 06 Июня 2019, 23:04 | Сообщение 1 |
| Давайте рассмотрим один очень популярный вариант, как открыть страницы сайта в отдельном окне, где также будут присутствовать ссылки с информацией. Но главное, страницу можно рассматривать полностью, ведь для этого идет прокрутка, где можете поднять или опустить, все функций как на полноценном сайте, но в нашем случай мы нажали на вызов и появилось окно с уже заданным адреса ресурса.
Обычно ссылки открываются в том же окне, в котором они нажаты, чтобы открыть их в новом окне, мы добавляем target="_blank" атрибут к ссылкам. Однако, чтобы открыть ссылки в отдельном всплывающем окне, мы можем использовать это onclick свойство и указать встроенный код JavaScript, window.open как показано ниже.
HTML + JavaScript код для всплывающих окон:
Код <a href="http://zornet.ru"
target="popup"
onclick="window.open('http://zornet.ru','popup','width=735,height=648'); return false;">
Открыть ссылку в окне
</a>
Здесь мы просим браузер добавить наш встроенный код JavaScript в поведение щелчка ссылки, указав onclick атрибут. Мы передаем URL адрес, который будет открыт во всплывающем окне, вместе с шириной и высотой всплывающего окна, где изначально задали размеры. Также добавляя, return false мы гарантируем, что действие щелчка по умолчанию не выполняется.
Демонстрация всплывающего окна
Нажмите на кнопку ниже, чтобы увидеть приведенный выше код в действии, там должно быть создано всплывающее окно размером 600 × 600, которое должно открыть указанную нами ссылку.
Демонстрация
Хотя этот вид всплывающих окон не должен блокироваться браузером, поскольку мы открываем только одно новое окно по щелчку пользователя, однако, если ваш браузер чрезмерно агрессивен в блокировании всплывающих окон, вам может потребоваться временно отключить блокировщик всплывающих окон, чтобы увидеть его в действие.
Как видно из скриншота ниже, всплывающее окно, которое мы создали, будет изменено пользователем, а также будет иметь собственную адресную строку и полосу прокрутки.
Если всплывающее окно можно изменять и прокручивать пользователем, это самый идеальный случай, когда вы создаете всплывающие окна. Невозможность изменить размер или прокрутить всплывающее окно может расстроить некоторых пользователей. Однако, если у вас есть конкретный вариант использования, где нужно отключить прокрутку, а также изменить размер всплывающего окна, тогда читайте дальше, чтобы выполнить эти настройки.
Настройка всплывающего окна
В самой простой форме, как мы видели выше, всплывающее окно позволит пользователям изменять его размер, прокручивать и изменять его адрес. В некоторых случаях вы можете запретить такие действия во всплывающем окне. Для этого нам необходимо передать дополнительные параметры window.open методу.
Эти дополнительные параметры, которые можно использовать следующие
location, menubar, resizable, scrollbars, status, titlebar и toolbar
Обратите внимание, что не все эти параметры поддерживаются всеми браузерами, где может не быть одинакового поведения.
Например, давайте посмотрим пример использования ниже:
Отключить изменение размера и прокрутку во всплывающем окне
Чтобы отключить изменение размера и прокрутку во всплывающем окне, укажите resizable=no и scrollbars=no и отключите размер.
Вы обнаружите, что отключение изменения размера всплывающего окна поддерживается только в Internet Explorer и не будет работать в Chrome или Firefox. Кроме того, скрытие полосы прокрутки будет работать в Internet Explorer (IE), Firefox и Opera, но не в Chrome.
Открыть ссылку в новом окне против всплывающего окна
Прежде чем вы начнете сходить с ума от всплывающих окон, уделите немного времени, чтобы решить, действительно ли вы хотите использовать всплывающее окно и открывать ссылки в новом окне. Ссылку можно открыть в новом окне или в новой вкладке, просто добавив target="_blank" атрибут к ссылкам, как показано ниже. Эти виды ссылок никогда не блокируются блокировщиком всплывающих окон при открытии.
Код <a href="http://zornet.ru/" target="_blank">Ключевое слово для перехода</a>
В заключение хотелось бы повторить, что если у вас нет очень конкретной причины, следует избегать как можно большего открытия ссылок во всплывающем окне.
Но когда вам действительно нужно это сделать, открывайте только одну ссылку за раз и отключайте поведение ссылок по умолчанию, чтобы избежать блокировщиков всплывающих окон и повысить удобство работы для пользователя.
| | Страна: (RU) |
| |
| Kosten | Вторник, 11 Июня 2019, 03:36 | Сообщение 2 |
|
| Всплывающие окна - горячая тема в сообществе веб-дизайнеров. Люди, которые плохо знакомы с торговлей, пытаются настроить их, а опытные веб-дизайнеры спорят об их использовании. Следует отметить, что эти аргументы не ограничиваются удобством использования и доступностью, но часто включают выбор объявлений.
В этой статье не обсуждается, что дизайнеры должны делать в отношении всплывающих окон, разметки и тому подобного. Это просто добавление инструмента в коробку.
Открытие всплывающих окон в HTML
Код <a href="#" onClick="MyWindow=window.open('http://www.google.com','MyWindow',width=600,height=300); return false;">Ключевое слово</a>
Также:
Код <a href="javascript:window.open('http://zornet.ru/','mypopuptitle','width=600,height=400')">Клик при открытие</a> | | Страна: (RU) |
| |
