Модальное окно на JavaScript

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

 

 

Чтобы запустить модальное окно, нужно передать функции значение window.onload. В котором мы будем передавать два элемента идентификатора "a" и "b".

//передача элементов по id "a" и "b"
window.onload = function()
{
a = document.getElementById("a");
b = document.getElementById("b");
} 

 

Затем мы прописываем функцию "showA", которая будет показывать модальное окно и передавать элементам "a" и "b" стили, а именно мы задали прозрачность, ширину и блокировку окна, если не была нажата ссылка "открыть".

 

//показываем окно функции "showA"
function showA()
{
//Задаем прозрачность и блокируем дисплей
//элемента "b"
b.style.filter = "alpha(opacity=80)";
b.style.opacity = 0.8;
b.style.display = "block";
// Задаем блокироваку и отступ сверху в 200px
//элемента "a"
a.style.display = "block";
a.style.top = "200px";
}

 

После открытия модального окна, нам нужно как то его потом закрыть или скрыть, для этого прописываем функцию "hideA", которая будет скрывать модальное окно и прописываем ей стили для элементов "a" и "b".

 

//Вызываем функцию "hideA", которая будет скрывать 
//окно для элементов "a" и "b"
function hideA()
{
b.style.display = "none";
a.style.display = "none";
}

 

 

Полный код.

 

<script>
//передача элементов по id "a" и "b"
window.onload = function()
{
a = document.getElementById("a");
b = document.getElementById("b");
} 

//показываем окно функции "showA"
function showA()
{
//Задаем прозрачность и блокируем дисплей
//элемента "b"
b.style.filter = "alpha(opacity=80)";
b.style.opacity = 0.8;
b.style.display = "block";
// Задаем блокироваку и отступ сверху в 200px
//элемента "a"
a.style.display = "block";
a.style.top = "200px";
}

//Вызываем функцию "hideA", которая будет скрывать 
//окно для элементов "a" и "b"
function hideA()
{
b.style.display = "none";
a.style.display = "none";
}      
</script>

 

 

 

Прописываем ссылку, которая будет "открывать" модальное окно и придаем ей класс "pages", он будет влиять только на внешнее оформление ссылки.

 

<a href="#" onclick="showA();" class="pages">Открыть</a>

 

В теге "div" указываем идентификатор "a", который будет взаимодействовать со стилями CSS и с кодом JavaScript. Далее прописываем еще один тег "div" и придаем ему идентификатор "windows", который будет выполнять роль разметки внутри контейнера модального окна.

Внутри указываем ссылку, которая будет "закрывать" модальное окно, также придаем ей стиль "pages" и по умолчанию задаем ей стиль "float: right", то есть будем отображать ссылку закрытия модального окна в верхнем правом углу.

 

<div id="a"><div id="windows">
<!-- Ваш текст -->
<a href="#" onclick="hideA();" class="pages" 
style="float: right;">Закрыть</a>
</div></div>

 

Прописываем идентификатор "b", который будет скрывать окно.

 

<div id="b"></div>

 

Полный код.

 

<a href="#" onclick="showA();" class="pages">Открыть</a>

<div id="a"><div id="windows">
<!-- Ваш текст -->
<a href="#" onclick="hideA();" class="pages" 
style="float: right;">Закрыть</a>
</div></div>

<div id="b"></div>

 

 

 

Обязательные стили CSS, без которых модальное окно будет не правильно работать, а точнее вообще некорректно работать и отображать информацию.

 

И так первый обязательный стиль, касающийся позиции, в данном примере это fixed. Он позволяет отображать модальное окно, при  этом ограничивая его с границей заливки. С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки "открыть", а также "закрыть". Также display: none, который позволяет скрывать модальное окно до нажатия ссылки.

 

#b {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:none;
background: grey;
z-index:1;
}

#a {
border:1px solid black;
position:fixed;
background: #eff7ff;
z-index:3;
display:none;
}

#windows {
padding:5px;
width: 500px;
height: 300px;
border: 2px solid blue; 
}

a.pages
{
background: #97cdff;
color: white;
padding: 4px;
text-decoration: none;
}

a:hover.pages
{
background: red;
color: white;
padding: 4px;
text-decoration: none;
}

 

Всем огромное спасибо за Ваше внимание!