HTMLCSSjQuery

Модальное окно как вконтакте

Как сделать на сайте модальное окно как вконтакте.

вконтакте модальное окно

Все видели ВКОНТАКТЕ подобные модальные окна. Причем они там везде, при клике на картинки, видео и т.п. нам всегда открывают модальные окна. Сделать их можно довольно просто, в этой статье предлагаю одну из реализаций подобных модальных окон с помощью jQuery. 

Для начала рассмотрим, то как модальные окна ведут себя ВКОНТАКТЕ и какими возможностями они обладают, исходя из этого попробуем сделать нечто подобное.

  • Самым важным и интересным свойством модальных окон ВКОНТАКТЕ является, то что при их открытии меняется полоса прокрутки браузера и в этом случае мы можем прокручивать только содержимое модального окна, а при его закрытии мы возвращаемся к той части основной страницы на которой остановились.
  • Модальные окна ВКОНТАКТЕ закрываются либо по нажатию ссылки "закрыть", либо по клику на крестике, либо по клику на сером фоне.
  • Внизу модального окна присутствует кругленькая кнопочка, которая позволяет изменить фон,  перекрывающий основную часть страницы за модальным окном.
  • Также эти модальные окна обладают возможностью растягивания при изменении размеров браузера, однако, эта часть в данном примере не будет реализована.

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

Итак сразу продемонстрирую, что у нас получится в итоге.

Начнем с того, что определим структуру документа и обозначим контейнеры с контентом. 

  1. <!-- Контейнер содержащий основной контент -->
  2. <div class="body">
  3.  
  4. <!-- Контейнер в 800px, в котором контент располагается по середине страницы -->
  5. 	  <div class="content">
  6. 		<div class="header"><h1>Модальное окно как вконтакте</h1></div>
  7. <!-- Ссылка при нажатии на которую, будет открываться модальное окно -->
  8. 		<p><a href="#" class="button">Открыть модальное окно</a></p>
  9. 	  </div>
  10. </div>
  11.  
  12. <!-- Тело модального окна -->
  13. <div class="body2">
  14.  
  15. <!-- Кнопка закрыть в правом углу -->
  16. 	  <div class="close"></div>
  17.  
  18. <!-- Кнопка сменить фон в левом углу -->
  19. 	  <div class="fon"></div>
  20. <!-- Скрытая кнопка сменить фон в левом углу (у них немножко разные стили
  21. для того, чтобы смотрелись адекватно на разном фоне) -->
  22. 	  <div class="fonact"></div>
  23.  
  24. <!-- Контейнер с контентом внутри модального окна -->
  25. 	  <div class="infog">
  26. 		<a href="#" class="button-close">закрыть</a>
  27. 	  </div>
  28.  
  29. <!-- Нижняя часть модального окна (не обязательно) -->
  30. 	  <div class="footer"></div>
  31.  
  32. </div>
  33.  
  34. <!-- Туман перекрывающий основной контент при открытии модального окна -->
  35. <div class="fog"></div>

Далее определим CSS свойства наших элементов, весь CSS не буду приводить здесь, его можно посмотреть в демо версии, приведу только то, на что следует обратить внимание.

  1. /* Убираем полосу прокрутки у всего документа */
  2. 	body 
  3. 	{ 
  4. 	    overflow: hidden;
  5. 	    font-family : "Arial", sans-serif;
  6. 	}
  7. /* Устанавливаем полосу прокрутки у основной части страницы */
  8. 	.body 
  9. 	{
  10. 	    height: 100%;
  11. 	    width: 100%;
  12. 	    overflow: auto;
  13. 	    position: absolute;
  14. 	    top: 0;
  15. 	    left: 0;
  16. 	}
  17. /* Делаем так чтобы контент был расположен по середине страницы с шириной div`а 800px */
  18. 	.content
  19. 	{
  20. 	    width: 800px;
  21. 	    margin: 0 auto;
  22. 	}
  23. /* Устанавливаем свойства тумана */
  24. 	.fog
  25. 	{
  26. 	    width: 100%;
  27. 	    background-color: #c0c0c0;
  28. 	    opacity: 0.5;
  29. 	    display: none;
  30. 	    position: absolute;
  31. 	    top: 0;
  32. 	    left: 0;
  33. 	}
  34. /* Устанавливаем свойства модального окна, в т.ч. прокрутку, 
  35. которая будет отображаться вместо прокрутки для дива .body */
  36. 	.body2
  37. 	{
  38. 	    width: 100%;
  39. 	    height: 100%;
  40. 	    overflow: auto;
  41. 	    position: absolute;
  42. 	    top: 0;
  43. 	    left: 0;
  44. 	    display: none;
  45. 	    z-index: 999;
  46. 	}
  47. /* Устанавливаем свойства дива, в котором показывается контент модального окна */
  48. 	.infog 
  49. 	{
  50. 	    background: #fff;
  51. 	    border: 1px solid red;
  52. 	    width: 700px;
  53. 	    margin: 0 auto;
  54. 	    position: relative;
  55. 	    top: 50px;
  56. 	    padding: 10px 20px 10px 20px;
  57. 	    border-radius:15px;
  58. 	    -moz-border-radius:10px;
  59. 	    -webkit-border-radius:10px;
  60. 	    box-shadow:0px 1px 3px rgba(0,0,0,.75);
  61. 	    -moz-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  62. 	    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  63. 	    z-index: 999;
  64. 	}
  65. /* Чтобы не рисовать картинку кнопки, которая будет менять фон, я сделал небольшой div, 
  66. который будет изменяться на div .fonact  при смене фона и обратно */
  67. 	.fon 
  68. 	{
  69. 	    width: 15px;
  70. 	    height: 15px;
  71. 	    background-color: #959595;
  72. 	    position: absolute;
  73. 	    top: 60px;
  74. 	    left: 50px;
  75. 	    border-radius:15px;
  76. 	    -moz-border-radius:10px;
  77. 	    -webkit-border-radius:10px;
  78. 	    box-shadow:0px 1px 3px rgba(0,0,0,.75);
  79. 	    -moz-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  80. 	    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  81. 	}
  82.  
  83. 	.fon:hover
  84. 	{
  85. 	    width: 15px;
  86. 	    height: 15px;
  87. 	    background-color: #646464;
  88. 	    position: absolute;
  89. 	    top: 60px;
  90. 	    left: 50px;
  91. 	    border-radius:15px;
  92. 	    -moz-border-radius:10px;
  93. 	    -webkit-border-radius:10px;
  94. 	    box-shadow:0px 1px 3px rgba(0,0,0,.75);
  95. 	    -moz-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  96. 	    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  97. 	}
  98.  
  99. 	.fonact 
  100. 	{
  101. 	    width: 15px;
  102. 	    height: 15px;
  103. 	    background-color: #959595;
  104. 	    position: absolute;
  105. 	    top: 60px;
  106. 	    left: 50px;
  107. 	    display: none;
  108. 	    border-radius:15px;
  109. 	    -moz-border-radius:10px;
  110. 	    -webkit-border-radius:10px;
  111. 	    box-shadow:0px 1px 3px rgba(0,0,0,.75);
  112. 	    -moz-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  113. 	    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  114. 	}
  115.  
  116. 	.fonact:hover
  117. 	{
  118. 	    width: 15px;
  119. 	    height: 15px;
  120. 	    background-color: #fff;
  121. 	    position: absolute;
  122. 	    top: 60px;
  123. 	    left: 50px;
  124. 	    border-radius:15px;
  125. 	    -moz-border-radius:10px;
  126. 	    -webkit-border-radius:10px;
  127. 	    box-shadow:0px 1px 3px rgba(0,0,0,.75);
  128. 	    -moz-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  129. 	    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.75);
  130. 	}
  131. /* Кнопка с картинкой крестиком */
  132. 	.close 
  133. 	{
  134. 	    width: 42px;
  135. 	    height: 42px;
  136. 	    position: absolute;
  137. 	    top: 45px;
  138. 	    right: 50px;
  139. 	    background: url(close.png) no-repeat;
  140. 	}

Далее пойдут JQuery функции, которые будут отвечать за взаимодействие элементов на странице.

  1. <script type="text/javascript">
  2. 	  $(document).ready(function(){
  3.  
  4. // Событие клик, происходит при нажатии кнопки с классом .button
  5. 	      $(".button").click(function(){
  6. // Меняем свойство overflow у основного контейнера с контентом .body
  7.  		    $(".body").css("overflow", "hidden");
  8. // Измеряем высоту всего документа, чтобы закрыть его полностью туманом
  9.    		    $(".fog").css("height", $(document).height());
  10. // Отображаем скрытый div с классом .fog, который является туманом
  11.  		    $(".fog").fadeIn("slow");
  12. // Отображаем скрытое модальное окно
  13.  		    $(".body2").fadeIn("slow");
  14. 	      });
  15.  
  16. // Событие клик, происходит при нажатии по модальному окну и ссылке "закрыть"
  17. // Для крестика-картинки этого делать не нужно, т.к. он является частью контейнера .body2
  18.  	      $(".body2,.button-close").click(function(){
  19. 		    $(".body2").fadeOut();
  20. 		    $(".fog").fadeOut();
  21.    		    $(".body").css("overflow", "auto"); 
  22.  	      });
  23.  
  24. // При нажатии на кнопку, которая меняет фон
  25. 	      $(".fon").click(function(){
  26. // происходит смена свойства background-color у тумана 
  27. 		    $(".fog").css("background-color", "#000"); 
  28. // далее скрываем саму кнопку изменения фона
  29.  		    $(".fon").fadeOut();
  30. // и открываем другую, у которой немного другие цвета
  31.  		    $(".fonact").fadeIn("slow");
  32. // Предотвращает от других действий, при клике по этому элементу
  33.  		    return false;
  34. 	      });
  35. // Все тоже самое что и для .fon, только в обратном порядке
  36. 	      $(".fonact").click(function(){
  37. 		    $(".fog").css("background-color", "#c0c0c0"); 
  38.  		    $(".fonact").fadeOut();
  39.  		    $(".fon").fadeIn("slow");
  40.  		    return false;
  41. 	      });
  42.  
  43. /*
  44. .infog - контейнер с содержимым модального окна
  45. При нажатии на этот элемент не должно ничего происходить,
  46. поэтому делаем return false.
  47. Если этого не сделать, то модальное окно будет закрываться
  48. при нажатии по диву с классом .infog
  49. */
  50.  	      $(".infog,.fon,.fonact").click(function(){
  51.  		    return false;
  52.  	      });
  53.  
  54. 	  });
  55.     </script>

Модальное окно готово, ничего сложного, как видите, нет. Все до безобразия легко и просто, а главное удобно применять такие окна на своих сайтах и проектах.