Часто при создании веб-сайта вы можете захотеть предоставить пользователю важную информацию во втором всплывающем окне; однако важно понимать, как правильно настроить размер всплывающего окна HTML.
Настройка размера всплывающего окна в формате HTML
Есть несколько различных методов, которые вы можете использовать для создания всплывающего окна для вашего веб-сайта. У каждого метода есть свои плюсы и минусы, поэтому внимательно изучите их, прежде чем выбрать тот или иной. То, как вы определяете размер окна в каждом случае, обычно одинаково, однако место в вашем HTML-коде, где оно определено, будет другим. Два метода открытия нового окна: либо с использованием Javascript, либо без использования Javascript.
Использование Javascript с формой
Наиболее распространенный метод, который веб-мастера используют для создания всплывающего окна, — это Javascript. Javascript — это гибкий язык сценариев, позволяющий обрабатывать взаимодействие с пользователем посредством сценария, который запускается непосредственно в браузере пользователя, а не на веб-сервере. Это позволяет очень быстро и динамично менять экран и форматировать его в зависимости от выбора пользователя.
Вы создаете всплывающее окно в Javascript, используя метод window.open. Однако то, что отличает метод Javascript, заключается в том, что метод open() выполняется в коде Javascript, определенном в вашем HTML-коде в тегах «script».
В форме вы программируете кнопку для открытия нового окна следующим образом.
<тип сценария=»текст/javascript»>
<!—
функция myWindow () {
window.open(«http://www.google.com/», «myWindow», «статус = 1, высота = 200, ширина = 200, размер = 0»)
}
//—>
</скрипт>
</голова>
<тело>
<form> <input type=»button» onClick=»myWindow()» value=»Новое окно»> </form>
Когда пользователь нажимает кнопку формы, запускается функция «myWindow» в Javascript, которая использует метод «windows.open» для запуска нового окна.
Метод Window.Open используется в каждом методе открытия всплывающего окна. Таким образом, свойства, используемые в этом методе, определяют, как будет выглядеть всплывающее окно, включая его размер.
Свойства Window.Open включают в себя:
- Полноэкранный режим — определяет, будет ли новое окно отображаться в полноэкранном режиме или нет.
- Высота — определяет высоту всплывающего окна в пикселях.
- Ширина — определяет ширину всплывающего окна в пикселях.
- Слева — расстояние от левого края экрана в пикселях.
- Top — Расстояние от верхней части экрана в пикселях.
- Статус — отображать ли верхнюю строку состояния.
- Resizable — разрешить или запретить пользователю изменять размер нового окна.
- Зависимый — это заставит всплывающее окно закрыться, если запустившее его окно закроется.
Использование Javascript с гиперссылкой
Другой метод всплывающих окон с использованием javascript — это когда вы используете гиперссылку, а не форму, и хотите, чтобы гиперссылка запускала всплывающее окно. Это делается почти так же, как и в приведенном выше примере формы, за исключением того, что вместо кнопки формы, запускающей функцию Javascript «myWindow», это делает гиперссылка.
<тип сценария=»текст/javascript»>
<!—
функция myWindow (адрес) {
window.open(адрес, «myWindow», «статус = 1, высота = 200, ширина = 200, изменяемый размер = 0»)
}
//—>
</скрипт>
</голова>
<тело>
<a HREF=»javascript:myWindow(‘http://www.google.com’)»>Нажмите, чтобы открыть</a>
Опять же, параметры размера настроены одинаково. Использование этого подхода позволяет вам использовать одну и ту же функцию «myWindow» с каждой гиперссылкой, с которой вы хотите создать всплывающее окно. Все, что вам нужно сделать, это передать ему URL.
Использование «настоящей» гиперссылки
Самая большая проблема с использованием Javascript для обработки всплывающих окон заключается в том, что многие люди хотят щелкнуть правой кнопкой мыши гиперссылку и открыть ссылку в новом окне. Если вы используете описанный выше метод, в котором гиперссылка на самом деле является вызовом функции Javascript, и если пользователь попытается открыть ссылку, щелкнув ее правой кнопкой мыши, он попадет на пустую страницу.
Из-за этой проблемы лучший подход к открытию всплывающего окна с гиперссылкой — использовать метод открытия окна как часть тега «href», но также сохранить адрес веб-сайта в теге. Эта техника показана ниже.
<a href=»http://www.google.com» onclick=»window.open(this.href, ‘всплывающее окно’, ширина = 200, высота = 200, полосы прокрутки, изменяемый размер’); return false;»> < /а>
Используя приведенный выше код, ваша страница будет намного чище и эффективнее. Гиперссылка остается «настоящей» гиперссылкой, но она также использует «window.open» для создания всплывающего окна с параметрами размера, определенными в том же теге «href».
Рекомендации по размеру всплывающего окна
Важные факторы, которые следует учитывать при установке параметров длины и ширины всплывающего окна, включают размещение окна и форматирование содержимого. Размещение вашего всплывающего окна определяется свойствами «top» и «left». Если окно расположено достаточно далеко вверху и слева от экрана, у вас будет больше места, чтобы открыть окно большего размера. Если оно ближе к нижнему или правому краю, вам необходимо соответствующим образом изменить размер окна. Во-вторых, всякий раз, когда вы определяете размер всплывающего окна в формате HTML, тщательно продумайте, как содержимое будет выглядеть в гораздо меньшем окне. Когда вы пишете страницу, которая будет отображаться во всплывающем окне, всегда форматируйте ее в соответствии с параметрами размера, которые вы планируете установить. Это гарантирует, что всплывающее окно будет выглядеть профессионально, чисто и иметь правильный размер.
Дополнительная информация
Для получения дополнительной информации о веб-кодировании ознакомьтесь со следующими статьями LoveToKnow.
- Расширенные HTML-коды
- Начальный PHP-код
- Как сделать ролловер изображения
- Крутые HTML-эффекты