Как открыть новое окно уменьшенного размера
Автор: Андрей Краснокутский
Дата: 2012-02-05 Открываем новое окно заданного размера
В практической деятельности web-мастера довольно часто возникает необходимость при клике по ссылке или картинке, открыть новое окно уменьшенного размера с заданными параметрами (шириной и высотой) с какой то дополнительной информацией.
Допустим основная статья носит справочный характер, а в тексте Вы упоминаете например обучающий материал. Информацию об этом обучающем материале как раз и можно вынести в отдельное окно. Пример использования Вы видите ниже, кликните по ссылке: Узнать подробности:
Или же Вам понадобилось в отдельном окне меньшего размера открыть увеличенную картинку (изображение). Кликните на изображение ниже:
Как видите, в результате клика по тексту или по картинке, открывается новое окно с заданными размерами, куда и подгружается новая web-страница. Реализуется такая возможность очень просто, с помощью JavaScript.
А теперь как всегда разбираем код данного скрипта и практическую реализацию.
Между тегами <head> и </head> прописываем код Листинга 1.
Листинг 1.
<script type="text/javascript">
function go(addr) {
window.open(addr,"MyWin", "menubar=yes,width=380,height=430");
}
</script>
|
Это стандартное подключение JavaScript к web-странице. В параметрахwidth=380, height=430указываем нужный размер нового окна, у меня здесь прописаны: ширина 380, высота 430 пикселей. Вы вписываете свои, нужные Вам размеры нового окна.
Новое окно, которое будет открываться при клике на текст или картинку, это обычная html страничка. Конечно же такую страничку нужно подготовить и добавить в нее нужную информацию (текст или картинку, или и то и другое). И положить ее в любую из папок сайта. В данном случае у меня это файлы: opisanie.html (для текста) и kurs.html (для изображения). Для вызова этой новой страницы, прописываем код Листинга 2 или Листинга 3 между тегами <body> и </body>.
Листинг 2 (открывает файл opisanie.html с текстовым описанием):
<div align="center">Обучающие Видео Курс: Сайт от А до Я: <a href = '' onclick="go('files/20120205/opisanie.html'); return false;">Узнать подробности</a></div> |
Листинг 3 (открывает файл kurs.html с увеличенным изображением):
<div align="center"><a href = '' onclick="go('files/20120205/kurs.html'); return false;"><img src="files/20120205/bannerdisk.jpg" alt="Кликните, чтобы узнать подробности о Видео Курсе: Сайт от А до Я" width="160" height="169" border="0"></a></div> |
В зависимости от того, что Вы хотите вывести в новом окне текст или изображение, выбираете Листинг 2 или Листинг 3. Не забудьте прописать реальный путь до нужных файлов, у меня это: files/20120205/kurs.htmlу Вас соотвественно будет свой путь.
Здесь кстати можно прописать реальный URL адрес, например указать адрес на ресурс в интернете, вот так: http://sait.luksweb.ru
Вот собственно говоря и все. Добавлю, что скрипт работает во всех распространенных браузерах.
Всего Вам доброго.
Читайте так же другие наши материалы.
Заработок в Интернете с помощью Почтовых Рассылок.
Как зарегистрироваться в качестве индивидуального предпринимателя (ИП).
Чего нельзя делать продвигая и раскручивая сайт.
Как автоматизировать свой Интернет Бизнес?
Подготовка графики (картинок) для публикации на сайте.
Просмотров: 20199
классно
просто
легко
спасибо
Это очень удобная функция, нужно подумать, где ее применить у себя на блоге! Мне очень нравится!
Замечательно!Всегда нужная и полезная информация.Буду обязательно применять
Спасибо за скрипт и отдельно за инструкцию по установке. Всё понятно, очень толково. Сделал на нём радио онлайн. Благодаря кешированию врубается практически мгновенно. Радио не "спотыкаетя при переходах, продолжает работать даже после закрытия основного окна(-он). Анкор ссылки показыват по имени стр сайта на которой находимся.
Пробовал в приложении WebAsyst разместить этот скрипт - не выходит
подскажите пожалуйста .. как сделать так чтобы ширина и высота фиксировались?
чтобы нельзя было менять ширину и высоту окна!
Коля обратите внимание на значения: width=380,height=430 в Листингах, они как раз и влияют на размер (ширина и высота в пикселях) нового окна, укажите нужные вам цифровые значения.
ПОЛУЧИЛОСЬ ВОТ СМОТРИТЕ http://board.uastend.com
Одного не понял как видео открыть отдельно от браузера. Надо значит написать в head> По отношению к чему выполнить команду?Чтото не доганю чуть-чуть. Если можно Напишите пожалуйста как это например Maxthon делает ,каким скриптом и как?Вот мне реально нужна токая возможность.С начала на странице браузера маленькое окно,а при нажатии на него,чтоб открылось окошко где то 200Х200 пикселов ,если не сложно то очень плиз.
|