13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 08.04.2014 JQuery - селектор по тексту без учета регистра 10.04.2013 jQuery редактирование таблиц 13.12.2012 jScrollPane 2 - прокрутка контента вниз (autoReinitialise и scrollToBottom) 12.12.2012 jQuery 1.7 метод on - замена bind, live, delegate 16.03.2012 Мгновенный поиск результатов на JQUERY
#119

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

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

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

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

Про сам jQuery распространяться не буду, скажу лишь, что последнюю версию этого фреймворка можно всегда скачать на сайте: jquery.com

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

Поставленные задачи будут сводиться к реализации первых 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>

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


29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 JQUERY: как вести логи действий пользователя 29.02.2012 JQUERY: раскрывающийся список
О сайте