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

Уроки по PHP, Javascript и т.п.
Ответить
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

Всплывающее окно с нуля (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

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

Сообщение tofido »

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

Если две и более картинок, то первая открывается во всплывающем окне, а другие просто переходят на страницу изображения.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

tofido
Вместо id="showBox" используй, например, class="showBox"
В яваскрипте работай как с class, а не id.
Аватара пользователя
tofido
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44

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

Сообщение tofido »

Спасибо, попробую.
Аватара пользователя
tofido
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44

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

Сообщение tofido »

что-то не получается
Аватара пользователя
tofido
Сообщения: 113
Зарегистрирован: 02 май 2012, 15:44

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

Сообщение tofido »

Кто поможет тому 10 голосов в ВК)
RaZeR
Сообщения: 4
Зарегистрирован: 22 май 2012, 16:58

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

Сообщение RaZeR »

Содержимое_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

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

Сообщение RaZeR »

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

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

Сообщение RaZeR »

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

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

Сообщение RaZeR »

Вот, как просил:
 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/12720 ... 1dbebb.jpg">
<img class="photo_preview" src="http://cs4726.vkontakte.ru/u00001/12720 ... d4da6f.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.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;
}


Должно работать! =)
обращайся ;)
Ответить