MYSQL
PHP
HTML
CSS
JS

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

Модальное (или всплывающее) окно - элемент, который показывается поверх основного контента сайта. В нём, обычно, содержится информация, которая должна быть показана без промедления (заблокировав интерфейс UI). Множеству вебмастеров приходится делать модальные окна для предоставления пользователям наиболее важной информации Для этого можно подключить плагин или создать такой функционал самому. Создавая модальное окно потребуется добавить контейнер в структуру документа, CSS-оформление и скрипт скрывающий и показывающий его:  
?
1
2
3
4
5
6
7
8
9
<div id='modal-window'>
    <div class="modal-title"></div>
    <div class="modal-close">&#215;</close>
    <div class="modal-content"></div>
</div>
 
<div id='btn-show-modal' onclick="modal('Какой же ответ на главный вопрос?', 42)">
    Показать модальное окно
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function modal(title, content) {
   $('#modal-window').toggleClass('visible');
   $("#modal-window > .modal-title").html(title || "");
   $("#modal-window > .modal-content").html(content || "");
}
 
$(document).on("mousedown", function(e) {
   if (
      $("#modal-window").hasClass('visible')
      &&  e.target.className === 'modal-close'
      || !$("#modal-window")[0].contains(e.target)
   ) {
      $("#modal-window").removeClass("visible");
   }
});
</script>
?
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
#btn-show-modal {
   padding:10px;
   color:#777;
   background:#eee;
   display: inline-block;
   cursor:pointer;
}
 
#modal-window {
   position: fixed;
   left: 50%;
   top: 25%;
   margin-left: -25%;
   width: 50%;
   background: #fff;
   text-align: center;
   box-shadow: 0 0 15px 5px rgba(0,0,0,0.1);
   display: none;
   z-index: 1;
}
 
#modal-window.visible {
   display: block;
}
 
#modal-window > .modal-title {
   display: inline-block;
   padding: 25px;
   font-size: 20px;
}
 
#modal-window > .modal-content {
   text-align: left;
   padding: 25px;
   font-size: 16px;
}
 
#modal-window > .modal-close {
   float: right;
   width: 35px;
   height: 35px;
   line-height: 35px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 30px;
   margin: 15px;
   color: #ddd;
}
 
#modal-window > .modal-close:hover {
   background: #ddd;
   color: #fff;
}
</style>
Основная часть модального окна - оформление. Javascript и HTML довольно скромных размеров. Результат:
Показать модальное окно

p.s. Модальное окно блокирует интерфейс (т.е. пользователь не может свободно просматривать контент), поэтому используйте их аккуратно. Они должны появляться, только если пользователь запросил какое-то действие. НО не сами! Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Как вывести время на Javascript. Цифровые часы Исключения в JS. try catch Сортировка массивов в JS. Функция sort Cookie в JS Canvas с нуля. Аналоговые часы на JS
↑