Всплывающее окно jquery, общие сведения по созданию

Одним из способов привлечения пользователей на сайт являются всплывающие окна. Конечно, это не дает стопроцентной гарантии повышения посещаемости, но все-таки на некоторое время они привлекают внимание к информации.

Создать всплывающее окно jquery – задача не из легких, но при желании она вполне выполнима. И все-таки, перед тем, как начинать создавать такое произведение, надо представлять визуально, что это такое и как оно выглядит.

Страница сайта создается при помощи языка HTML. На ней, в том порядке, который нравится владельцу ресурса, размещаются кнопки. Их может быть несколько штук (от одной до ...), на усмотрение создающего. Нажимая на такую кнопочку, посетитель будет видеть всплывающее окно jquery. Содержание оных может быть совершенно разным, например привлекательная картинка или новая форма регистрации, реклама, сообщение, да все что угодно. Фантазия в этом деле не ограничивается никакими пределами. Всплывающие окна чаще всего перекрывают страницу сайта прозрачным темным фоном и на каждом из них присутствует пиктограмма, обычно понимаемая пользователями на уровне интуиции. Возможности данной функции безграничны.

На первый взгляд, создать такую вещь сложно, но это ошибочное впечатление. Если есть желание и существует потребность, почему бы в этом не разобраться подробнее? Даже если многое непонятно, всегда есть возможность изучить процесс, обратившись к профессионалам. Давайте, к примеру, создадим и разместим кнопки, которые будут вызывать окна регистрации, картинок или фотографий и вкладки. Используя javascript всплывающее окно, вернее кнопку, оформляем в виде ссылки и задаем для всех них общий класс. Ссылки помещаем внутрь тега div-а.

Атрибут rel, добавленный в каждую, в точности соответствует классовому названию окна и дает возможность открыть нужное, едва лишь кликнув на ссылку. Все, всплывающее окно jquery мы создали. Теперь остается его сделать аккуратным и привлекательным. Для этого потребуется использование стилей.

Работа в стилях сложностей не вызывает: все просто и понятно. Надо только хоть немного владеть языком HTML. Но даже если пользователь не разбирается в нем, нужные сведения легко найти в интернете. Для того чтобы кнопки jquery, всплывающие окна выглядели во всех известных на сегодняшний день браузерах одинаково красиво и аккуратно, надо: а) центрировать блоки ссылок- б) закруглить углы- в) подключить PIE для ИЕ 7-8.

В целом, разметка HTML будет одинаковой для всех всплывающих окон. Поэтому на использовании тегов не стоит зацикливаться: если не владеете, достаточно запомнить несколько основных. Разница будет только в оформлении размеров, то есть одно всплывающее окно jquery по ширине будет выглядеть несколько иначе. То же самое касается и содержимого.

Для размещения формы регистрации в указанный выше тег надо записать следующее:

Close

Видео: Модуль 3. Основы работы с базами данных. Сервер баз данных MySQL

Регистрация на сайте

Введите логин: Введите пароль:

В данной записи reg_form совпадает с атрибутом первой кнопки rel, а двойной класс обертывающего блока задается popup reg_form (пробел обязателен). Такая надпись позволяет создать как общий стиль для всех всплывающих окон, так и задать для каждого в отдельности конкретные параметры.

Далее начинаем размещать кнопку, отвечающую за картинки. Здесь тоже самое: указывается двойной класс и обозначается путь к папке, где эти изображения находятся. Ну и далее в том же духе.

После создания останется только подкорректировать общий внешний вид страницы сайта, прописать правила для окон. То есть они все будут одинаково оформлены, отредактированы по горизонтали, и каждое будет иметь кнопку, отвечающую за закрытие самого окна и его заголовка. Кроме того, при загрузке страницы ресурса они все будут скрыты.

Если же нет никакого желания делать это самому, всегда есть возможность скачать скрипт, позволяющий создать всплывающее окно автоматически, только немного корректируя действия программки.