Модальное окно на CSS

Модальное окно на CSS

Рубрика « Картинки » | Нет комментариев

Простое модальное окно на css и js. Пошаговая инструкция. Можно на странице сделать бесконечное множество всплывающих окон. Например, галерею.

В файл стилей (style.css) сайта копируем и ставим:

/*Модальные фотки*/
.modal_div {
	width: 460px; 
	height: 460px; /* Размеры можно изменять */
	border-radius: 5px;
	border: 3px #000 solid;
	background: #fff;
	position: fixed;
	top: 1%; 
	left: 50%; 
	margin-top: -150px;
	margin-left: -150px;
	display: none; 
	opacity: 0; 
	z-index: 5; 
	padding: 20px 10px;
}
/* Кнопка закрыть для тех кто в танке:) */
.modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
/* Подложка */
#overlay {
	z-index: 3;
	position: fixed; 
	background-color: #000; 
	opacity: 0.8; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0; 
	cursor: pointer;
	display: none; 
}

Открываем любой js файл в вашем шаблоне и ставим в самый вниз скрипт:

$(document).ready(function() { 
    var overlay = $('#overlay'); 
    var open_modal = $('.open_modal'); 
    var close = $('.modal_close, #overlay'); 
    var modal = $('.modal_div'); 

     open_modal.click( function(event){ 
         event.preventDefault(); 
         var div = $(this).attr('href'); 
         overlay.fadeIn(400, 
             function(){ 
                 $(div) 
                     .css('display', 'block') 
                     .animate({opacity: 1, top: '35%'}, 200); 
         });
     });

     close.click( function(){ 
            modal 
             .animate({opacity: 0, top: '45%'}, 200, 
                 function(){ 
                     $(this).css('display', 'none');
                     overlay.fadeOut(400); 
                 }
             );
     });
});
</script>

В индексном файле (html) прописываем для картинок ссылки с классами, которые при нажатии откроют модальные окна:

<a href="#modal1" class="open_modal"><img src="images/1.png" alt=""></a>
<a href="#modal2" class="open_modal"><img src="images/2.png" alt=""></a>
<a href="#modal3" class="open_modal"><img src="images/3.png" alt=""></a>
<a href="#modal4" class="open_modal"><img src="images/4.png" alt=""></a>

В самый низ индексного (html) файла перед закрывающим тегом body ставим модальные окна:

<div id="modal1" class="modal_div"><span class="modal_close">X</span>
<img src="images/1.png" alt=""></div>
<div id="modal2" class="modal_div"><span class="modal_close">X</span>
<img src="images/2.png" alt=""></div>
<div id="modal3" class="modal_div"><span class="modal_close">X</span>
<img src="images/3.png" alt=""></div>
<div id="modal4" class="modal_div"><span class="modal_close">X</span>
<img src="images/4.png" alt=""></div>

Отображаем фоновую полупрозрачную подложку кодом:

<div id="overlay"></div>

Всё сохраняем, страничку обновляем.

Демо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif