Уроки по PHP, Javascript и т.п.
Александр
Создатель сайта
Сообщения: 4574 Зарегистрирован: 27 сен 2009, 16:45
Сообщение
Александр » 04 ноя 2011, 18:00
Всплывающее окно с нуля (HTML, JavaScript)
В этом уроке описано как с нуля, без использования библиотек типа jQuery, а на чистом JavaScript, создать всплывающее окне с изображением или с любым другим содержимым.
В уроке не создаётся полноценная фотогалерея. Её придется дорабатывать под ваши требования.
Функционал:
- открытие всплывающего окна
- закрытие окна
1. Содержимое 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 id="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 href="http://flapps.ru/">http://flapps.ru</a> <div id="photoBox"> <img id="bigPhoto" src="" /><br /> <a id="closeBtn" href="#">Закрыть</a></div> <div id="shadow"></div> </body></html>
2. Файл style.css
Код: Выделить всё
#shadow { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:999; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);} #photoBox { display: none; position:absolute; top: 5%; left: 25%; width: 50%; height: 70%; padding: 26px 25px 10px 25px; background-color: #fff; z-index:9999; overflow: auto; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
3. Файл showBox.js
Код: Выделить всё
window.onload = (function(){ ge('showBox').onclick=function(){ // заменим ссылку на большое фото в окне. Ссылку на большое фото вытаскиваем из самой ссылки, в атрибуте href 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;} /* flapps.ru */
Пример:
http://flapps.ru/example/showbox/index.html
Исходник:
http://flapps.ru/example/showbox/showbox.rar
tofido
Сообщения: 113 Зарегистрирован: 02 май 2012, 15:44
Сообщение
tofido » 21 май 2012, 16:49
А как сделать если больше одной картинки?
Если две и более картинок, то первая открывается во всплывающем окне, а другие просто переходят на страницу изображения.
Александр
Создатель сайта
Сообщения: 4574 Зарегистрирован: 27 сен 2009, 16:45
Сообщение
Александр » 21 май 2012, 20:28
tofido
Вместо id="showBox" используй, например, class="showBox"
В яваскрипте работай как с class, а не id.
tofido
Сообщения: 113 Зарегистрирован: 02 май 2012, 15:44
Сообщение
tofido » 22 май 2012, 15:03
Кто поможет тому 10 голосов в ВК)
RaZeR
Сообщения: 4 Зарегистрирован: 22 май 2012, 16:58
Сообщение
RaZeR » 22 май 2012, 17:06
Содержимое_JS_файла
Код: Выделить всё
window.onload = (function(){ gebc('showBox',0).onclick=function(){ // заменим ссылку на большое фото в окне. Ссылку на большое фото вытаскиваем из самой ссылки, в атрибуте href 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;}function gebc(classname, index){return (typeof el == 'string' || typeof el == 'number') ? document.getElementsByClassName(classname)[index]: classname;} /* flapps.ru */
Содержимое_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 href="http://flapps.ru/">http://flapps.ru</a> <div id="photoBox"> <img id="bigPhoto" src="" /><br /> <a id="closeBtn" href="#">Закрыть</a></div> <div id="shadow"></div> </body></html>
Последний раз редактировалось
Александр 22 май 2012, 20:54, всего редактировалось 2 раза.
Причина: Используй [code][/code]
RaZeR
Сообщения: 4 Зарегистрирован: 22 май 2012, 16:58
Сообщение
RaZeR » 22 май 2012, 17:11
могу без проблем помочь еще, сколько угодно, времени полно. где меня найти знаешь
RaZeR
Сообщения: 4 Зарегистрирован: 22 май 2012, 16:58
Сообщение
RaZeR » 22 май 2012, 18:25
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> <script>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'] ];</script> <a class="showBox" index="0" 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" index="1" 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" index="2" 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"><div id="TitlePhoto"></div><div style="clear:both"></div><img id="bigPhoto" src="" /><br /><a id="closeBtn" href="#">Закрыть</a></div><div id="shadow"></div> </body></html>
CSS
Код: Выделить всё
#shadow { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:999; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);} #photoBox { display: none; position:absolute; top: 5%; left: 25%; width: 50%; height: 70%; padding: 10px 25px 10px 25px; background-color: #fff; z-index:9999; overflow: auto; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}#bigPhoto{cursor:pointer}
JS
Код: Выделить всё
var index_photo=1;window.onload = (function(){ // уже профессиональный подходmegablocks=document.getElementsByClassName('showBox');var total_photos=(megablocks.length-1);for(var i = 0; i < megablocks.length; ++i) megablocks[i].onclick=function(){index_photo = this.getAttribute('index');ge('TitlePhoto').innerHTML=all_photos[index_photo][0];ge('bigPhoto').src=all_photos[index_photo][1];ge('bigPhoto').onclick = function (){index_photo++;if(index_photo > total_photos){index_photo=0;}ge('TitlePhoto').innerHTML=all_photos[index_photo][0];ge('bigPhoto').src=all_photos[index_photo][1];}; // покажем тень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';// обнулим индекс фотоindex_photo=0;return false;}}); function ge(el) {return (typeof el == 'string' || typeof el == 'number') ? document.getElementById(el) : el;}function gebc(classname, index){return (typeof el == 'string' || typeof el == 'number') ? document.getElementsByClassName(classname)[index]: classname;}
RaZeR
Сообщения: 4 Зарегистрирован: 22 май 2012, 16:58
Сообщение
RaZeR » 23 май 2012, 15:10
Вот, как просил:
HTML
CSSCSS тот, что в первом посте
JSwindow.onload = (function(){
megablocks=document.getElementsByClassName('showBox');
for(var i = 0; i < megablocks.length; ++i) megablocks.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;
}
Должно работать! =)
обращайся