Всплывающее окно с нуля (HTML, JavaScript)

Уроки по PHP, Javascript и т.п.

Всплывающее окно с нуля (HTML, JavaScript)

Сообщение Александр » 04 ноя 2011, 18:00

Всплывающее окно с нуля (HTML, JavaScript)

В этом уроке описано как с нуля, без использования библиотек типа jQuery, а на чистом JavaScript, создать всплывающее окне с изображением или с любым другим содержимым.

В уроке не создаётся полноценная фотогалерея. Её придется дорабатывать под ваши требования.
Функционал:
- открытие всплывающего окна
- закрытие окна

1. Содержимое html файла
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Всплывающее окно javascript</title>
  5. <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  6. <script src="showBox.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <a id="showBox" href="http://cs4726.vkontakte.ru/u00001/127202895/x_931dbebb.jpg">
  11.     <img class="photo_preview" src="http://cs4726.vkontakte.ru/u00001/127202895/m_44d4da6f.jpg" width="130" height="87" />
  12. </a>
  13.  
  14. <a href="http://flapps.ru/">http://flapps.ru</a>
  15.  
  16. <div id="photoBox">
  17.     <img id="bigPhoto" src="" /><br />
  18.     <a id="closeBtn" href="#">Закрыть</a>
  19. </div>
  20.  
  21.  
  22. <div id="shadow"></div>
  23.  
  24. </body>
  25. </html>


2. Файл style.css
  1. #shadow {
  2.     display: none;
  3.     position: absolute;
  4.     top: 0%;
  5.     left: 0%;
  6.     width: 100%;
  7.     height: 100%;
  8.     background-color: #000;
  9.     z-index:999;
  10.     -moz-opacity: 0.8;
  11.     opacity:.80;
  12.     filter: alpha(opacity=80);
  13. }
  14.  
  15. #photoBox {
  16.     display: none;
  17.     position:absolute;
  18.     top: 5%;
  19.     left: 25%;
  20.     width: 50%;
  21.     height: 70%;
  22.     padding: 26px 25px 10px 25px;
  23.     background-color: #fff;
  24.     z-index:9999;
  25.     overflow: auto;
  26.     border-radius: 6px;
  27.     -moz-border-radius: 6px;
  28.     -webkit-border-radius: 6px;
  29. }



3. Файл showBox.js
  1. window.onload = (function(){
  2.     ge('showBox').onclick=function(){
  3.         // заменим ссылку на большое фото в окне. Ссылку на большое фото вытаскиваем из самой ссылки, в атрибуте href
  4.         ge('bigPhoto').src=this.href;
  5.         // покажем тень
  6.         ge('photoBox').style.display='block';
  7.         // откроем окно
  8.         ge('shadow').style.display='block'
  9.         return false;
  10.     }
  11.    
  12.     ge('closeBtn').onclick=function(){
  13.         // уберем окно с фото
  14.         ge('photoBox').style.display='none';
  15.         // уберем тень
  16.         ge('shadow').style.display='none';
  17.         return false;
  18.     }
  19. });
  20.  
  21. function ge(el) {
  22.     return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;
  23. }
  24.  
  25. /* flapps.ru */



Пример: Чтобы увидеть ссылку - зарегистрируйтесь

Исходник: Чтобы увидеть ссылку - зарегистрируйтесь

За это сообщение автора Александр поблагодарил:
Emeltil
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение tofido » 21 май 2012, 16:49

А как сделать если больше одной картинки?

Если две и более картинок, то первая открывается во всплывающем окне, а другие просто переходят на страницу изображения.
Аватара пользователя
tofido

 
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44
Благодарил (а): 3 раз.
Поблагодарили: 2 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение Александр » 21 май 2012, 20:28

tofido
Вместо id="showBox" используй, например, class="showBox"
В яваскрипте работай как с class, а не id.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение tofido » 21 май 2012, 20:41

Спасибо, попробую.
Аватара пользователя
tofido

 
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44
Благодарил (а): 3 раз.
Поблагодарили: 2 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение tofido » 22 май 2012, 09:42

что-то не получается
Аватара пользователя
tofido

 
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44
Благодарил (а): 3 раз.
Поблагодарили: 2 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение tofido » 22 май 2012, 15:03

Кто поможет тому 10 голосов в ВК)
Аватара пользователя
tofido

 
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44
Благодарил (а): 3 раз.
Поблагодарили: 2 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение RaZeR » 22 май 2012, 17:06

Содержимое_JS_файла
  1. window.onload = (function(){
  2.     gebc('showBox',0).onclick=function(){
  3.         // заменим ссылку на большое фото в окне. Ссылку на большое фото вытаскиваем из самой ссылки, в атрибуте href
  4.         ge('bigPhoto').src=this.href;
  5.         // покажем тень
  6.         ge('photoBox').style.display='block';
  7.         // откроем окно
  8.         ge('shadow').style.display='block'
  9.         return false;
  10.     }
  11.    
  12.     ge('closeBtn').onclick=function(){
  13.         // уберем окно с фото
  14.         ge('photoBox').style.display='none';
  15.         // уберем тень
  16.         ge('shadow').style.display='none';
  17.         return false;
  18.     }
  19. });
  20.  
  21. function ge(el) {
  22.     return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;
  23. }
  24. function gebc(classname, index){
  25. return (typeof el == 'string' || typeof el == 'number') ? document.getElementsByClassName(classname)[index]: classname;
  26. }
  27.  
  28. /* flapps.ru */


Содержимое_HTML_файла
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Всплывающее окно javascript</title>
  5. <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  6. <script src="showBox.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <a class="showBox" href="http://cs4726.vkontakte.ru/u00001/127202895/x_931dbebb.jpg">
  11.     <img class="photo_preview" src="http://cs4726.vkontakte.ru/u00001/127202895/m_44d4da6f.jpg" width="130" height="87" />
  12. </a>
  13.  
  14. <a href="http://flapps.ru/">http://flapps.ru</a>
  15.  
  16. <div id="photoBox">
  17.     <img id="bigPhoto" src="" /><br />
  18.     <a id="closeBtn" href="#">Закрыть</a>
  19. </div>
  20.  
  21.  
  22. <div id="shadow"></div>
  23.  
  24. </body>
  25. </html>
Последний раз редактировалось Александр 22 май 2012, 20:54, всего редактировалось 2 раз(а).
Причина: Используй [code][/code]
RaZeR

 
Сообщения: 4
Зарегистрирован: 22 май 2012, 16:58
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение RaZeR » 22 май 2012, 17:11

могу без проблем помочь еще, сколько угодно, времени полно. где меня найти знаешь :roll:
RaZeR

 
Сообщения: 4
Зарегистрирован: 22 май 2012, 16:58
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение RaZeR » 22 май 2012, 18:25

HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Всплывающее окно javascript</title>
  5. <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  6. <script src="showBox.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <script>
  11. var all_photos = [['Фотография N1. можно придумать какой-нибудь заголовок','http://cs4726.vkontakte.ru/u00001/127202895/x_931dbebb.jpg'], ['Фото № 2. Это моя ава на its-me.ru =) ','http://its-me.ru/uploads_user/1000/1/0_632518140035.jpg'], ['Ава моего друга :)','http://its-me.ru/uploads_user/1000/3/0_948692301805.jpg'] ];
  12. </script>
  13.  
  14. <a class="showBox" index="0" href="http://cs4726.vkontakte.ru/u00001/127202895/x_931dbebb.jpg">
  15. <img class="photo_preview" src="http://cs4726.vkontakte.ru/u00001/127202895/m_44d4da6f.jpg" width="130" height="87" />
  16. </a>
  17.  
  18. <a class="showBox" index="1" href="http://its-me.ru/uploads_user/1000/1/0_632518140035.jpg">
  19. <img class="photo_preview" src="http://its-me.ru/uploads_user/1000/1/0_632518140035.jpg" width="130" height="87" />
  20. </a>
  21.  
  22. <a class="showBox" index="2" href="http://its-me.ru/uploads_user/1000/3/0_948692301805.jpg">
  23. <img class="photo_preview" src="http://its-me.ru/uploads_user/1000/3/0_948692301805.jpg" width="130" height="87" />
  24. </a>
  25.  
  26. <div>
  27. <a href="http://flapps.ru/">http://flapps.ru</a>
  28. <a href="http://its-me.ru/">http://its-me.ru</a>
  29. </div>
  30.  
  31. <div id="photoBox">
  32. <div id="TitlePhoto"></div>
  33. <div style="clear:both"></div>
  34. <img id="bigPhoto" src="" /><br />
  35. <a id="closeBtn" href="#">Закрыть</a>
  36. </div>
  37. <div id="shadow"></div>
  38.  
  39. </body>
  40. </html>


CSS
  1. #shadow {
  2.     display: none;
  3.     position: absolute;
  4.     top: 0%;
  5.     left: 0%;
  6.     width: 100%;
  7.     height: 100%;
  8.     background-color: #000;
  9.     z-index:999;
  10.     -moz-opacity: 0.8;
  11.     opacity:.80;
  12.     filter: alpha(opacity=80);
  13. }
  14.  
  15. #photoBox {
  16.     display: none;
  17.     position:absolute;
  18.     top: 5%;
  19.     left: 25%;
  20.     width: 50%;
  21.     height: 70%;
  22.     padding: 10px 25px 10px 25px;
  23.     background-color: #fff;
  24.     z-index:9999;
  25.     overflow: auto;
  26.     border-radius: 6px;
  27.     -moz-border-radius: 6px;
  28.     -webkit-border-radius: 6px;
  29. }
  30. #bigPhoto{cursor:pointer}


JS
  1. var index_photo=1;
  2. window.onload = (function(){
  3.  
  4. // уже профессиональный подход
  5. megablocks=document.getElementsByClassName('showBox');
  6. var total_photos=(megablocks.length-1);
  7. for(var i = 0; i < megablocks.length; ++i) megablocks[i].onclick=function(){
  8. index_photo = this.getAttribute('index');
  9. ge('TitlePhoto').innerHTML=all_photos[index_photo][0];
  10. ge('bigPhoto').src=all_photos[index_photo][1];
  11. ge('bigPhoto').onclick = function (){
  12. index_photo++;
  13. if(index_photo > total_photos){
  14. index_photo=0;
  15. }
  16. ge('TitlePhoto').innerHTML=all_photos[index_photo][0];
  17. ge('bigPhoto').src=all_photos[index_photo][1];
  18. };
  19.  
  20.  
  21. // покажем тень
  22. ge('photoBox').style.display='block';
  23. // откроем окно
  24. ge('shadow').style.display='block'
  25. return false;
  26. }
  27.  
  28. ge('closeBtn').onclick=function(){
  29. // уберем окно с фото
  30. ge('photoBox').style.display='none';
  31. // уберем тень
  32. ge('shadow').style.display='none';
  33. // обнулим индекс фото
  34. index_photo=0;
  35. return false;
  36. }
  37. });
  38.  
  39. function ge(el) {
  40. return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;
  41. }
  42. function gebc(classname, index){
  43. return (typeof el == 'string' || typeof el == 'number') ? document.getElementsByClassName(classname)[index]: classname;
  44. }
RaZeR

 
Сообщения: 4
Зарегистрирован: 22 май 2012, 16:58
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Всплывающее окно с нуля (HTML, JavaScript)

Сообщение RaZeR » 23 май 2012, 15:10

Вот, как просил:
 HTML
<!DOCTYPE html>
<html>
<head>
<title>Всплывающее окно javascript</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="showBox.js"></script>
</head>
<body>

<a class="showBox" href="http://cs4726.vkontakte.ru/u00001/127202895/x_931dbebb.jpg">
<img class="photo_preview" src="http://cs4726.vkontakte.ru/u00001/127202895/m_44d4da6f.jpg" width="130" height="87" />
</a>

<a class="showBox" href="http://its-me.ru/uploads_user/1000/1/0_632518140035.jpg">
<img class="photo_preview" src="http://its-me.ru/uploads_user/1000/1/0_632518140035.jpg" width="130" height="87" />
</a>

<a class="showBox" href="http://its-me.ru/uploads_user/1000/3/0_948692301805.jpg">
<img class="photo_preview" src="http://its-me.ru/uploads_user/1000/3/0_948692301805.jpg" width="130" height="87" />
</a>

<div>
<a href="http://flapps.ru/">http://flapps.ru</a>
<a href="http://its-me.ru/">http://its-me.ru</a>
</div>

<div id="photoBox">
<img id="bigPhoto" src="" /><br />
<a id="closeBtn" href="#">Закрыть</a>
</div>
<div id="shadow"></div>

</body>
</html>


 CSS
CSS тот, что в первом посте


 JS
window.onload = (function(){

megablocks=document.getElementsByClassName('showBox');
for(var i = 0; i < megablocks.length; ++i) megablocks[i].onclick=function(){
ge('bigPhoto').src=this.href;

// покажем тень
ge('photoBox').style.display='block';
// откроем окно
ge('shadow').style.display='block'
return false;
}

ge('closeBtn').onclick=function(){
// уберем окно с фото
ge('photoBox').style.display='none';
// уберем тень
ge('shadow').style.display='none';
return false;
}
});

function ge(el) {
return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;
}


Должно работать! =)
обращайся ;)
RaZeR

 
Сообщения: 4
Зарегистрирован: 22 май 2012, 16:58
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.


Вернуться в Уроки на другие темы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron