Всплывающее окно на сайте (модальное/pop-up окно)

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

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

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

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

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

<a  (0)" onClick="javascript:window.open('http://Ссылка_на_файл_окна', 'okno', 'width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes');"> Открыть "Мое всплывающее окно"</a>

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

<a  (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.

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

<a href="javascript:doPopup('ССЫЛКА_НА_ОКНО');">Текст ссылки</a>

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

<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> нужно вставить следующий код:

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>

HTML

<!--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 стили.

/*Всплывающее окно на 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.

<a href="javascript://" >
Текст сообщения – собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки ” (двойные или одинарные) нужно заменить на \’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.
 
Больше статей:  Color Picker для сайта - HTML коды цветов
Вот пример кода всплывающего окна, где вместо текстового сообщения вставлена ссылка на само вплывающее окно, то есть тут всплывающее окно создано в отдельном html файле, а в коде размещена только ссылка на него:
 
<a href="javascript://" >