Логин :
Пароль :
Зарегистрироваться
Закрыть
Вход / Регистрация
По дате добавления
По сложности

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

Аватар новости
Множеству вебмастеров приходится делать модальные окна для предоставления пользователям наиболее важной информации

Для этого можно подключить плагин или создать такой функционал самому.

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

Для начала создадим кнопку, которая при клике по которой окно будет появлятся:


<div id='btn-show-modal' onclick='modal()'>Показать модальное окно</div>


Опишем функцию, отображающую окно:

function modal(){
if(!$('#modal-window').length){
$(document.body).append("<div id='modal-window'>"+
"<p>Название модального окна</p><close>x</close>"+
"<div></div></div>");
$("#modal-window close").click(function(){
$(this).parent().css("opacity","0");
});
}
$("#modal-window").css("opacity","1");
$("#modal-window div").html("Текст модального окна");
}


Приступим к оформлению контейнера:

#modal-window{
position:fixed;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
width:500px;
height:300px;
background:#fff;
text-align:center;
box-shadow:0 0 15px 5px rgba(0,0,0,0.05);
}
#modal-window p{
display:inline-block;
background:#fca;
color:#fff;
padding:10px;
z-index:1;
}
#modal-window div{
text-align:left;
padding:25px;
}
#modal-window close{
float:right;
}



Результат:
Показать модальное окно


Скрыть модальное окно, при щелчке мимо формы:

$(document).click(function(){
if(event.target.id!="modal-window" &&
event.target.id!="btn-show-modal" &&
$(event.target).parents("#modal-window").length==0 &&
$("#modal-window").css("opacity")>0){
$("#modal-window").css("opacity","0");
}
});




Спасибо за внимание.
Задавайте свои вопросы в комментариях.
Случайные уроки по этой теме:
jQuery. Функции animate, show, hide
Поиск, регулярные выражения и замена в строке
jQuery изнутри. Делаем селектор $, замыкание, $.css
Рисование и вращение изображения в Canvas
WebGL Библиотека Three.js. Отображение автомобиля 2
Для написания комментария
войдите или зарегистрируйтесь
Mala1002 :
24 января 2017 в 19:43
Добрый вечер. При нажатии на кнопку происходит ошибка. В консоле пишет "modal is not defined
at HTMLDivElement.onclick". Подскажите ,пожадуйста, в чем проблема