Универсальный скрипт попапов

Материал из GutenWeb Wiki

Содержание 1 Позиционирование попапов 2 JS 3 CSS 4 IE6 CSS

Позиционирование попапов

// ОТ ВЕРХНЕЙ ГРАНИЦЫ ЭКРАНА
var topX = document.documentElement.scrollTop + 15;  // кроме webkit
var topX = (document.body.scrollTop || document.documentElement.scrollTop) + 15;
p2.css('top', topX+'px');



	
// ОТ МЫШКИ
var pageY = e.pageY;
$(".popup").css('top', pageY + 'px');

JS

	/* POPUP UNIVERSAL */
	
	
	// open
	$('.popupCall').click(function(e){
		
		$(this).parent().next().css('top', e.pageY-250).removeClass('hidden');
		
		$('.shadow').css({opacity:0,display:'block'}).fadeTo('fast', 0.5);
		
		return false;
		
	});

	
	// close
	$('.popupClose, .shadow').click(function(){
		
		$('.popupContent').addClass('hidden');
		$('.shadow').fadeOut();
		
		return false;
		
	});
	
	
	// close by ESC button
	$(document).keyup(function(e) {

		if (e.which == 27){
			$('.popupContent').addClass('hidden');
			$('.popapContent').add('.shadow').fadeOut();
		}
		
	});

	

CSS

.popupContent {
	position:absolute;
	left:50%;
	zoom:1;
	z-index:1000;
}

.popupContentInner {
	position:absolute;
	background:white;
	left:-400px;
	border:5px solid #ED1C24;
	
	width:700px;
	
	padding-top:45px;
	padding-left:50px;
	padding-right:50px;
	padding-bottom:45px;
}



.shadow {
	background:#000;
	height:100%;
	left:0;
	opacity:0.45;
	filter:alpha(opacity = 45);
	position:fixed;
	top:0;
	width:100%;
	z-index:500;
	display:none;
}

IE6 CSS

/* тень за попапом */

.shadow {
position:absolute;
height:expression(document.getElementById('main').clientHeight + 'px');
width: expression((documentElement.clientWidth||document.body.clientWidth) <980?"980px":'100%');
`}


/* имитация position:fixed */

.popup {
	_position:absolute;
	top: expression(
		eval(document.documentElement.scrollTop) + 100 + "px"
	);
	
}