Всплывающее окно на сайте (модальное окно) — англ. pop-up — удобный и простой способ вывести какую-то информацию в небольшом отдельном окне, при этом не перегружая основную страницу.
Сами всплывающие окна могут быть очень разными. Можно вывести отдельную целую страницу своего сайта, а можно вывести небольшую текстовую информацию.
Самый простой способ установки всплывающего окна — ссылка
Для того, чтобы на вашем сайте появилось всплывающее (модальное) окно, его предварительно нужно создать, или оно уже должно существовать. То есть вам нужно будет знать ссылку на желаемое всплывающее окно.
Для создания лучше пользоваться отдельным HTML редактором (я пользуюсь DreamWeaver или NotePad++), наполнить страницу необходимым содержимым и сохранить как html файл. Далее загрузить этот файл на свой сайт.
Сам способ по своей структуре — это обычная ссылка с подключением внутри нее JavaScript. Поэтому эту ссылку при редактировании страницы нужно вставлять в режиме HTML в том месте, где вы хотите чтобы появилась ссылка, при нажатии на которую информация открывается во всплывающем окне.
1 |
<a href="javascript:void(0)" onClick="javascript:window.open('http://Ссылка_на_файл_окна', 'okno', 'width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes');"> Открыть "Мое всплывающее окно"</a> |
Вот пример моего кода, примененного на этой странице:
1 2 |
<a href="javascript:void(0)" onClick="javascript:window.open('https://stepfor.top/Pages/Vsplivaushee_okno.html', 'okno', 'width=400,height=300,left=250, top=100,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes');"> Открыть "Мое всплывающее окно"</a> |
А вот собственно и результат
Открыть «Мое всплывающее окно»
Синтаксис window.open
Открытие окна происходит с помощью javascript метода 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
1 |
<a href="javascript:doPopup('ССЫЛКА_НА_ОКНО');">Текст ссылки</a> |
Javascript всплывающего окна
А вот собственно и сам скрипт всплывающего окна, который Вам нужно будет вставить сразу за ссылкой, чтобы окно заработало:
1 2 3 4 5 6 |
<script language="javascript"> function doPopup(popupPath) { window.open(popupPath,'name', 'width=550,height=550,scrollbars=NO,left=350,top=100'); } </script> |
Всплывающее окно на Jquery
Этот пример скрипта я нашла на сайте habrahabr.ru и слегка его отредактировала. Данный вариант примечателен тем, что вам не придется создавать отдельное окно. Весь текст вы сможете написать прямо на той же странице, где и расположена ссылка на всплывающее окно. Вот как такое окно будет выглядеть:
Прежде всего вам необходимо будет подключить библиотеку Jquery, но перед этим желательно проверить не подключена ли она уже у вас, так как скорее все подключена. Если все таки нужно ее подключить, то между тегами <head> и </head> нужно вставить следующий код:
1 |
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!--HTML всплывающего окна на Jquery--> <a href="javascript:PopUpShow()">НАЖМИ, ЧТОБЫ ОТКРЫТЬ ВСПЛЫВАЮЩЕЕ ОКНО</a> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Информация для отображения во сплывающем окне <a href="javascript:PopUpHide()">Закрыть окно</a> </div> </div> <!--САМ СКРИПТ ОКНА--> <script> $(document).ready(function(){ //Скрыть PopUp при загрузке страницы PopUpHide(); }); //Функция отображения PopUp function PopUpShow(){ $("#popup1").show(); } //Функция скрытия PopUp function PopUpHide(){ $("#popup1").hide(); } </script> |
Также этот вариант еще примечателен тем, что если вы не будете применять CSS стили, ваше всплывающее окно превратится в спойлер! Так что, если вы хотите все-таки, чтобы у вас был не спойлер, а полноценное всплывающее окно, добавьте на сайт следующие CSS стили.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*Всплывающее окно на jquery */ .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; left: 0px; } .b-popup .b-popup-content{ margin:200px auto 0px auto; height:100%; max-width:500px; max-height: 375px; padding:10px; background-color: #ffffff; border-radius:5px; box-shadow: 0px 0px 10px #000; } |
Всплывающее окно на CSS
Об этом окне я подробно написала в отдельной статье так как оно действительно заслуживает внимания. Тут приведу лишь пример:
Всплывающее окно на uCoz
На все сайты uCoz уже автоматически подключена библиотека jquery, с помощью которой Вы можете создавать Ajax окна. Всплывающее окно на uCoz выводит простое текстовое сообщение. Скрипт также является вариантом простой ссылки с подключением внутри нее JavaScript.
1 |
<a href="javascript://" onclick="new _uWnd('ajax','Всплывающее окно на uCoz','300','100',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'Текст сообщения')"> Текст на который нужно нажать, чтобы появилось окно </a> |
Текст сообщения — собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки » (двойные или одинарные) нужно заменить на \’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.
Вот пример кода всплывающего окна, где вместо текстового сообщения вставлена ссылка на само вплывающее окно, то есть тут всплывающее окно создано в отдельном html файле, а в коде размещена только ссылка на него:
1 |
<a href="javascript://" onclick="new _uWnd('ajax','Всплывающее окно на uCoz','300','100',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},'<iframe src=\'CCЫЛКА_НА_ЗАРАНЕЕ_СОЗДАННОЕ_ОКНО\' style=\'width:100%; height:100%; margin:0px; border:0px;avtosize:1;\'></iframe>')"> Текст на который нужно нажать, чтобы появилось окно </a> |
Спасибо Вам, я воспользовалась первым «рецептом»
всплывающее окно-ссылка, подскажите пж как сделать так чтобы всплывающее окно закрывалось только при нажатии на крестик
а не при клике по веб странице?
Оля, если честно пока не нашла решение для Вас.
Доброе утро.Вот мне нужно анимировать подобное окно,подскажите,пожалуйста,куда и что прописать.Уж очень резко вскакивает окно.
Андрей, это целая отдельная тема «Анимация CSS».
Доброго дня. Скрипт доступен, написано доступно . Вопрос как сделать чтоб окно закрівалось?
Эдгар, о каком окне идет речь? Обычно окно закрывается при нажатии на значок закрытия окна.
Можно там где закрыть окно ,заменить на это:
X
И закинуть в Css:
.b-popup .ex{right:5px;position:relavite;font-size:15px;display:block;background:#d7d7d7;width:60px;heght:50px;border-radius:5px;text-decoration:none;background:#d8e2e6;}
X
Зравствуйте у меня такая проблема я делаю сайт на юкоз фотоопросы у меня код есть опросов и вот я хотел бы узнать как зделать чтоб при нажатии на кнопку голосовать всплывало окно там будет кое какая инфа а после закрытия окна можно было бы принять участие в голосование?????
Вот код голосования
Красивая столица??? Польша-Варшава Украина-Киев Белоруссия-Минск Россия-Москва Казахстан-Астана Турция-Анкара Азербайджан-Баку Киргизия-Бишкек Таджикистан-Душанбе Армения-Ереван Израиль-Ерусалим Узбекистан-Ташкент Грузия-Тбилиси Монголия-Улан-батор Болгария-София Латвия-Рига Чехия-Прага Словения-Лубянка Румыния-Бухарест Дагестан-Махачкала Чеченская Республика-Грозный Ингушетия-Магас Северная Осетия-Алания-Владикавказ Кабардино-Балкарская Республика-Нальчик Карачаево-Черкесская Республика-ЧеркесскСмотреть Результаты
Vakha, Что касается uCOz, то там очень мало возможностей для рекдактирования. Поэтому для этой задачи нужно писать отдельный javascript.
Я только шупаю еще так где лучше тогда начать сайт делать??
Или если в юкозе писать джава скрипт вы этим занимаетесь? и сколько будет по цене?
Vakha, я бы не советовала Ucoz. Сама была там 2 года. Потом пришлось сайты переносить. Смысл начинать, елси все-равно оттуда уйдете. Я как ни старалась, все равно ушла на WordPress и хочу сказать, что это небо и земля!
Спасибо! очень помог, вопрос можно заменить текст на рисунок в этом скрипте?
Тимур, да, это возможно.
В коде
Ссылку_на_файл_окна надо поменять на ссылку на изображение. Изображение предварительно должно быть расположено на сайте.
подскажите, а как сделать разные окна для разных ссылок…что нужно изменить в скрипте и что нужно изменить в css и в html ?
Антон! В статье очень много вариантов окон. Какой именно вариант вас интересует?
Большое спасибо! Супер!
А каким образом сделать окно «Мы онлайн»?
Night_Pilgrim, для начала мне желательно понять как выглядит это окно.
Примеры классные! Как раз то, что я искал! Спасибо!! ))
Спасибо большое!
А как переносить текст в таком окне (делать с новой строки)? Обычный html не помогает
В статье приведено несколько вариантов всплывающих окон.Какой именно вариант Вас интересует?
На рисунки отобразил ( http://gidfilm.at.ua/vreminie/2012-11-26_103201.gif ) в это место вставить скрипт чтоб работал, я сам пробовал но он так и пишет текстом, а скрипт показывать не хочет, не могу понять где че не правильно делаю, в это окно хочу поставить скрипт от так.ру с накруткой
Артем, в Вашем случае я бы сделала так. Создала отдельное окно (как отдельную html страницу), где разместила нужный скрипт.
теперь из этой страницы Вы можете сделать всплывающее окно.
Люди а как сделать, чтоб вместо текста прописать (
данная строка просто для примера) чтобы показывала что я хочу , просто срочно нужно. жду ваши идеи если сам найду поделюсь.
Артем! Мне не совсем понятен вопрос. Что именно и где нужно прописать?