Простая всплывашка на jQuery — Записки программиста

Введение

Простая всплывашка на jQuery Зачастую на сайтах приходится выводить всевозможные информативные окна — попапы, или как их еще называют всплывашки. Попапы могут быть использованы для вывода различных сообщений, для ввода пользователем информации и тд. Сейчас сайты становятся все более интерактивными и такие всплывашки используются чаще и чаще. В связи с этим, я решил набросать статейку, в которой покажу как можно быстро с помощью jQuery самом реализовать попап без использования других библиотек.

Простая всплывашка на jQuery практически всегда располагается по центу экрана, а все что находится за ней затемняется. Расположение и затемнение можно реализовать с помощью css. А само появление и исчезновение уже придется писать на jQuery.

Простая всплывашка на jQuery. Код

Приступим непосредственно к написанию кода, начнем с css:

.popup_bg{
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	display: none;
	background-color: #000;
	opacity: 0.5;
}
.div_popup{
	position: fixed;
	z-index: 2000;
	margin-top: 10%;
	width: 300px;
	height: 300px;
	left: 50%;
	margin-left: -150px;
	display: none;
	
	border: 3px solid #00FF00;
	background-color: #0000FF;
}

В стилях всего два класса, один — popup_bg будет использован для затемнения всего, что будет находиться за всплывашкой. Это будет простой div, который мы растянем на весь экран.
Теперь напишем html код страницы с попапом:

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Простой popup на jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
</head>
<body>
	<!-- popup bg-->
	<div class="popup_bg"></div>
	
	<!-- popup -->
	<div class="div_popup">
		<input type="button" id="hide_popup" value="Скрыть попап" />
	</div>
	
	<input type="button" id="show_popup" value="Показать попап" />
</body>
</html>

Ну и наконец напишем js, который будет показывать и скрывать всплывашку. Не забудьте подключить библиотеку jQuery, без нее код не будет работать.

$(document).ready(function(){
	// действия для кнопок
	$('#show_popup').click(function(){
		show_popup();
	});
	
	$('#hide_popup').click(function(){
		hide_popup();
	});
});

// показать попап
function show_popup(){
	// получаем размер экрана
	var bg_height = $(document).height();
	var bg_width = $(window).width();
	// задаем темному фону размер на весь экран
	$('.popup_bg').css({
		'width': bg_width,
		'height':bg_height
	});
	// плавно показываем фон и попап
	$('.popup_bg').fadeIn(500);       
	$('.div_popup').fadeIn(500);
}

// скрыть попап
function hide_popup(){
	// плавно скрываем попап и фон
	$('.popup_bg').fadeOut(500);        
	$('.div_popup').fadeOut(500);
}

Вот и все, вы можете скачать исходники — тут.

Простая всплывашка на jQuery: 1 комментарий