Всплывающее окно с нуля (HTML, JavaScript)
Добавлено: 04 ноя 2011, 18:00
Всплывающее окно с нуля (HTML, JavaScript)
В этом уроке описано как с нуля, без использования библиотек типа jQuery, а на чистом JavaScript, создать всплывающее окне с изображением или с любым другим содержимым.
В уроке не создаётся полноценная фотогалерея. Её придется дорабатывать под ваши требования.
Функционал:
- открытие всплывающего окна
- закрытие окна
1. Содержимое html файла
2. Файл style.css
3. Файл showBox.js
Пример: http://flapps.ru/example/showbox/index.html
Исходник: http://flapps.ru/example/showbox/showbox.rar
В этом уроке описано как с нуля, без использования библиотек типа 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>
Код: Выделить всё
#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