Скрипт всплывающего окна (модальное/pop-up окно)

Всплывающее (модальное) окно — англ. pop-up — удобный и простой способ вывести какую-то информацию в небольшом отдельном окне, при этом не перегружая основную страницу.
Сами всплывающие окна могут быть очень разными. Можно вывести отдельную целую страницу своего сайта, а можно вывести небольшую текстовую информацию.

Самый простой способ установки всплывающего окна — ссылка

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

Для создания лучше пользоваться отдельным HTML редактором (я пользуюсь DreamWeaver или NotePad++), наполнить страницу необходимым содержимым и сохранить как html файл. Далее загрузить этот файл на свой сайт.

Сам способ по своей структуре — это обычная ссылка с подключением внутри нее JavaScript. Поэтому эту ссылку при редактировании страницы нужно вставлять в режиме HTML в том месте, где Вы ходите чтобы появилась ссылка, при нажатии на которую информация открывается во всплывающем окне.

Вот пример моего кода, примененного на этой странице:

А вот собственно и результат Открыть «Мое всплывающее окно»

Синтаксис window.open

Открытие окна происходит с помощью javascript метода window.open.

window.open(‘Ссылка_на_файл_окна’,‘Имя_окна’,‘Параметры_окна’)

Ссылка_на_файл_окна — полный путь к Вашему файлу всплывающего, который Вы недавно загрузили на свой сайт.
Имя_окна — имя окна.
Параметры окна (атрибуты) — с помощью атрибутов можно редактировать сам вид кона и его положение на экране. Все атрибуты пишутся через запятую и находятся внутри одинарных кавычек. После атрибута ставится знак = и пишется значение атрибута: цифры или же yes/no.

Например, в коде предоставленном мною окна такие атрибуты:
width=845 (ширина окна)
height=400 (высота окна)
status=no (строку состояния НЕ отображать)
toolbar=no (панель инструментов НЕ отображать)
menubar=(меню НЕ отображать)
scrollbars=yes (отображать полосы прокрутки)
resizable=yes (разрешать пользователю менять размер окна)

Атрибуты всплывающего окна

Атрибут NN IE — Описание
alwaysLowered — Окно всегда над другими
alwaysRised — Окно всегда под другими
channelMode — Показывать содержимое на панели каналов
copyhistory — Перенести новое окно в историю из текущего
dependent — Дочернее окно закроется при закрытии родительского
directories — Показать в новом окне кнопки папок
fullscreen — Не отображать заголовок и меню
height — Размер содержимого окна в пикселях
hotkeys — Отключить клав. сокращения (кроме Quit и Sequrity Info)
innerHeight — Высота содержимого.
innerWidth — Ширина содержимого.
left — Смещение левой границы окна относительно границы экрана
location — Отображать поле адреса
menubar — Отображать меню
outerHeight — Наружная ширина окна
outerWidth — Наружная ширина окна
resizeble — Разрешать польз. менять размер окна
screenX — Смещение левой границы окна от границы экрана
screenY — Смещение верхней границы окна от границы экрана
scrollbars — Отображать полосы прокрутки
status — Отображать строку состояния
titlebar — Отображать строку меню.
toolbar — Отображать панель инструментов
top — Смещение верхней границы окна относительно границы экрана
width — Ширина содержимого.
z-lock — Новое окно фикс. под прочими окнами.

Скрипт вплывающего окна

Окно, которое рассмотрено в этой статье, можно разместить на странице и с помощью полноценного скрипта.

HTML

Javascript всплывающего окна
А вот собственно и сам скрипт всплывающего окна, который Вам нужно будет вставить сразу за ссылкой, чтобы окно заработало:

Всплывающее окно на Jquery

Этот пример скрипта я нашла на сайте habrahabr.ru и слегка его отредактировала. Данный вариант примечателен тем, что вам не придется создавать отдельное окно. Весь текст вы сможете написать прямо на той же странице, где и расположена ссылка на всплывающее окно. Вот как такое окно будет выглядеть:

НАЖМИ, ЧТОБЫ ОТКРЫТЬ ВСПЛЫВАЮЩЕЕ ОКНО
Информация для отображения во сплывающем окне
Закрыть окно

Прежде всего вам необходимо будет подключить библиотеку Jquery, но перед этим желательно проверить не подключена ли она уже у вас, так как скорее все подключена. Если все таки нужно ее подключить, то между тегами <head> и </head> нужно вставить следующий код:

HTML

Также этот вариант еще примечателен тем, что если вы не будете применять CSS стили, ваше всплывающее окно превратится в спойлер! Так что, если вы хотите все-таки, чтобы у вас был не спойлер, а полноценное всплывающее окно, добавьте на сайт следующие CSS стили.

Всплывающее окно на CSS

Об этом окне я подробно написала в отдельной статье так как оно действительно заслуживает внимания. Тут приведу лишь пример:

Нажмите на ссылку

Всплывающее окно на uCoz

На все сайты uCoz уже автоматически подключена библиотека jquery, с помощью которой Вы можете создавать Ajax окна. Всплывающее окно на uCoz выводит простое текстовое сообщение. Скрипт также является вариантом простой ссылки с подключением внутри нее JavaScript.

Текст сообщения — собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки » (двойные или одинарные) нужно заменить на \’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.

Вот пример кода всплывающего окна, где вместо текстового сообщения вставлена ссылка на само вплывающее окно, то есть тут всплывающее окно создано в отдельном html файле, а в коде размещена только ссылка на него:

Ниже Вы видите предложение на подписку Новостей этого сайта (RSS) — которая оформлена с помощью всплывающего окна, и является еще одним примером использования.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

27 комментария

  1. Спасибо Вам, я воспользовалась первым «рецептом»
    всплывающее окно-ссылка, подскажите пж как сделать так чтобы всплывающее окно закрывалось только при нажатии на крестик
    а не при клике по веб странице?

  2. Доброе утро.Вот мне нужно анимировать подобное окно,подскажите,пожалуйста,куда и что прописать.Уж очень резко вскакивает окно.

  3. Доброго дня. Скрипт доступен, написано доступно . Вопрос как сделать чтоб окно закрівалось?

  4. Зравствуйте у меня такая проблема я делаю сайт на юкоз фотоопросы у меня код есть опросов и вот я хотел бы узнать как зделать чтоб при нажатии на кнопку голосовать всплывало окно там будет кое какая инфа а после закрытия окна можно было бы принять участие в голосование?????
    Вот код голосования
    Красивая столица??? Польша-Варшава Украина-Киев Белоруссия-Минск Россия-Москва Казахстан-Астана Турция-Анкара Азербайджан-Баку Киргизия-Бишкек Таджикистан-Душанбе Армения-Ереван Израиль-Ерусалим Узбекистан-Ташкент Грузия-Тбилиси Монголия-Улан-батор Болгария-София Латвия-Рига Чехия-Прага Словения-Лубянка Румыния-Бухарест Дагестан-Махачкала Чеченская Республика-Грозный Ингушетия-Магас Северная Осетия-Алания-Владикавказ Кабардино-Балкарская Республика-Нальчик Карачаево-Черкесская Республика-ЧеркесскСмотреть Результаты

  5. Спасибо! очень помог, вопрос можно заменить текст на рисунок в этом скрипте?

    • Тимур, да, это возможно.
      В коде

      Ссылку_на_файл_окна надо поменять на ссылку на изображение. Изображение предварительно должно быть расположено на сайте.

  6. подскажите, а как сделать разные окна для разных ссылок…что нужно изменить в скрипте и что нужно изменить в css и в html ?

  7. Большое спасибо! Супер!

  8. А каким образом сделать окно «Мы онлайн»?

  9. Примеры классные! Как раз то, что я искал! Спасибо!! ))

  10. А как переносить текст в таком окне (делать с новой строки)? Обычный html не помогает

  11. На рисунки отобразил ( http://gidfilm.at.ua/vreminie/2012-11-26_103201.gif ) в это место вставить скрипт чтоб работал, я сам пробовал но он так и пишет текстом, а скрипт показывать не хочет, не могу понять где че не правильно делаю, в это окно хочу поставить скрипт от так.ру с накруткой

  12. Люди а как сделать, чтоб вместо текста прописать (

    данная строка просто для примера) чтобы показывала что я хочу , просто срочно нужно. жду ваши идеи если сам найду поделюсь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *