Делаем простой поп ап(PopUp) генератор попапов скачать
HTML clipboard
PopUp попап генератор скачать бесплатно можно по этой ссылке. Вам только останется вставить готовый код скрипта на вашу страницу и ваше попап окно будет работать на вас так кака вам будет нужно.
Сейчас мы установим
простой скрипт всплывающего окна или просто
попап(poup) и посмотрим как он работает.
Чтобы не ошибиться, мы должны понимать, что имеем дело с ДВУМЯ страницами.
Первая показывается в окне попапа - это ее УРЛ указан в скрипте.В этих примерах она будет называться
popup.htm. Не вставляйте скрипт в ЭТУ страницу!
А вот вторая страница - запускает попап. Это может быть ваша index.html например. Свой скрипт вы втыкаете в нее. Назовем ее "пусковой" страницей....Все ясно? Ладно, поверю :)
Шаг 1- Откройте любой текстовый редактор.
Шаг 2- Выделите весь текст в рамке, нажав левую кнопку мыши и протянув курсор из верхнего левого в правый нижний угол.
<script language="javascript">
<!-- Begin
function popupPage() {
var page = "http://www.yoursite.ru/mypopup.html";
var windowprops = "height=515, width=400, location=no, status=no"
+ "scrollbars=no, menubars=no, toolbars=no, resizable=no";
output = window.open(page, "popup", windowprops);
}
// End -->
</script>
|
Шаг 3 - Кликните кнопку 'Copy' на панели инструментов (тулбаре) - Затем вставьте скопированное в текстовый редактор.
Сейчас вам надо подредактировать ваш скрипт, чтобы он открывал правильную страницу и чтобы она выглядела так , как вы того хотите...
Шаг 4 - Подредактируйте строку 4 чтобы URL переменной 'page' указывал на ту страницу, которую вы хотите открыть. То,что вы можете изменить, выделено красным.
Если эта страница находится в той же директории, что и ваша "пусковая" страница, то просто впишите имя страницы. Например: var page = "popup.htm". Но вообще поначалу всегда используйте полный адрес начиная с http://
Шаг 5- Отредактируйте строку 5 чтобы размеры попапа соответствовали содержанию открываемой страницы. Цифры выделены красным. Все размеры в пикселах
Шаг 6 - Отредактируйте строки 5 и 6 добившись нужного вам вида попапа. Эти свойства принимают только логические - "булевые" - значения, то есть вы должны указать 'yes' или 'no' .
Что это за свойства?:
Меню - определяет - будет ли показано меню
Скроллбары - определяет - будут ли видны полосы прокрутки
Статус - определяет - будет ли показана строка состояния (статус бар)
Тулбар - определяет - будет ли показана стандартная панель инструментов
Адрес - определяет - будет ли показана адресная панель (локейшн бар)
Ресайз - определяет - можно ли при просмотре менять размеры окна попапа
Директории - определяет - будут ли видны кнопки стандартных директорий меню
Чтобы увидеть как все эти штуки меняют вид попапа, поиграем с "агрегатом" :).
Агрегат
Если вы решите отказаться от скроллбаров и от возможности изменения размеров окна, то ваш попап должен быть достаточно большим чтобы вместить все содержание загружаемой страницы. Иначе часть содержания будет недоступна.
Поиграйте с агрегатом и проверьте какие параметры больше всего подходят для вашей страницы.
Подсоединитесь к Инету и впишите полный адрес вашей страницы в верхнее левое окно агрегата. Подгоните все размеры пока все не будет окей.
Step 7- Сохраните ваш скрипт! Сейчас нам надо вставить его в вашу страницу.
Step 8- Откройте "пусковую" страницу в вашем текстовом редакторе. Вы увидите в самом ее верху нечто вроде:
<html>
<head>
<title>Моя страница
ВОТ ТУТ ВЫ ВСТАВЛЯЕТЕ СВОЙ СКРИПТ
</head>
|
Шаг 9 -
Скопируйте и вставьте ваш скрипт туда, где я вставил красный текст. Получится
нечто вроде:
<html>
<head>
<title> Untitled Document
<script language="javascript">
<!-- Begin function popupPage()
{
var page = "http://www.vashurl.com/vashpopup.html";
var windowprops = "height=515, width=400, location=no, status=no"
+ "scrollbars=no, menubars=no, toolbars=no, resizable=no";
output = window.open(page, "popup", windowprops);
}
// End --></script>
|
Почти все дома! :)
Скрипт на месте, но он неактивен. Теперь мы его запустим с помощью маленькой строчки-комманды onLoad=popupPage()
Это просто загрузка функции, которая указана в вашем скрипте
Step 10- Снова взгляните на вашу "пусковую" страницу. Найдите тег <body>
}
// End -->
</script>
впечатайте здесь вашу коммандную строку >
|
Шаг 11 - Впечатайте приведенную ниже командную строку там, где видите красный текст. Не забудьте про скобки... В итоге все будет выглядеть примерно так:
<body bgcolor="#FFFFFF" onLoad=popupPage()>
Шаг 12 - Сохраните отредактированную страницу.
Полный порядок!
Вы только что вставили свой первый попап скрипт... Накормите себя мороженым в награду за это :).
Теперь просто загрузите обе страницы на сервер. Либо загрузите только "пусковую" если вторая уже загружена.
Оглавление
| На верх
Версия для печати
Скачать статью