Сделал простое модальное окно. Осваиваю jquery потихоньку. Есть баги в IE6, IE7.
В функционале есть возможность центрирования окна, закрытия при нажатии клавиши escape, закрытие при нажатии на затемнение.
Итак, первым делом что стоит сделать это подключить jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Далее подключаем файл плагина

<script type="text/javascript" src="path_to_file/mdss_modal_window.js"></script>

Если необходимо подключаем центрирование окна. Если не надо, то ничего не прописываем

<script type="text/javascript">
	$(function() {
		$('.modal').center();
	});
</script>

Затем прописываем стили для окна

<style type="text/css">
	.modal {
		position:absolute;
		top:20px;
		left:10px;
		width:640px;
		background:#fff;
		padding:10px;
		border-radius:10px;
		display:none;
		box-shadow:0 0 40px #ddd;
	}
</style>

Название класса может быть любое.
Теперь в верстке прописываем ссылку на открытие окна

<a href="#example_1" name="modal">Открываем окошко example 1</a>

Обязательно прописываем name=”modal” для инициализации плагина. Id example_1 должен соответствовать id появляющегося блока.
Далее вставляем в верстку блок который должен всплывать

<div id="example_1" class="modal">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

На этом все. Остается только стилизовать. Конечный код плагина ниже

$(function() {
	$.fn.extend({
		center: function () {
			return this.each(function() {
				var $this = $(this);
				var $window = $(window);
				clearTimeout($this.timerHandle);
				var top = ($window.height() - $this.height())/2+$window.scrollTop();
				var left = ($window.width() - $this.width())/2+$window.scrollLeft();
				clearTimeout(this.timerHandle);
				this.timerHandle = setTimeout(function () {
					$this.animate({
						"top": top,
						"left": left
					}, 300);
					$(window).bind('scroll', function() {
						$($this).center();
					});
					$(window).bind('resize', function() {
						$($this).center();
					});
				}, 200);
			});
		}
	});

	var overlayHeight = $(document).height();
	var overlayWidth = $(window).width();
	$('body').prepend('<div id="mask"></div>');
	$('#mask').css({'position':'absolute','top':'0','left':'0', 'background':'#000', 'cursor':'pointer', 'z-index':'999', 'display':'none'});
	$(window).bind('resize', function() {
		$('#mask').css({'width':($(document).width()), 'height':($(document).height())});
	});
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		$('#mask').css({'width':overlayWidth,'height':overlayHeight});
		$('#mask').fadeTo("slow",0.7);
		$(id).css({'z-index':'1000', 'position':'absolute', 'display':'none'});
		$(id).fadeIn(500);
		$(document).keyup(function(d) {
			if (d.keyCode == 27) {
				$('#mask').fadeOut();
				$(id).fadeOut();
			}
		});
		$('#mask').click(function () {
			$(this).fadeOut();
			$(id).fadeOut();
		});
	});
});

Демо / Скачать

Такие сообщения не делал только ленивый и я решил присоединиться к ним

Я сделал два варианта: с использованием jquery и без использования оного. Без использования по функционалу не проигрывает, разве что сообщение появляется и пропадает не плавно, а сразу. В посте я опишу только вариант с jquery.

Первый этап. Разметка.

<div class="notification_box box_error"><!-- меняется в блоках только название: box_error, box_success, box_warning, box_info. Все остальные стили автоматом меняются -->
	<p class="box_title">Ошибка</p>
	<div class="box_text">
		Что-то пошло не так и произошла ошибка. В скором <a href="#">времени</a> мы это починим. Бззззз...
	</div>
</div>
<div class="notification_box box_success">
	<p class="box_title">Все прошло успешно</p>
	<div class="box_text">
		Поздравляем, <a href="#">все прошло</a> успешно...
	</div>
</div>
<div class="notification_box box_warning">
	<p class="box_title">Предупреждение</p>
	<div class="box_text">
		Предупреждение <a href="#">о том</a> или о сем...
	</div>
</div>
<div class="notification_box box_info">
	<p class="box_title">Информация</p>
	<div class="box_text">
		До <a href="#">конца света</a> осталось 9999 дней. Пора запасаться макаронами и солью!
	</div>
</div>

Этап 2. Стили.

.notification_box {
	width:430px;
	border:1px solid;
	padding:10px 10px 10px 60px;
	margin:20px 0;
	position:relative;
	border-radius:6px;
	behavior:url(/pie.htc); /* файл кидать в корень сайта, дает круглые углы */
}
	.notification_close {
		position:absolute;
		top:4px;
		right:4px;
		color:#333;
		font:11px/11px Arial, Verdana, Tahoma, Helvetica;
		text-decoration:underline;
		opacity:.4;
	}
		a:hover.notification_close {
			text-decoration:none;
			opacity:1;
		}
	.box_title {
		font:18px/18px Tahoma, Helvetica, Verdana, Arial;
		padding-bottom:4px;
		margin-top:-3px;
	}
		.box_title a {
			font:18px/18px Tahoma, Helvetica, Verdana, Arial;
			text-decoration:underline;
		}
			.box_title a:hover {
				text-decoration:none;
			}
	.box_text {
		color:#333;
		font:11px/11px Arial, Verdana, Tahoma, Helvetica;
	}
		.box_text p, .box_text div, .box_text span {
			padding:0 !important;
			margin:0 !important;
		}
		.box_text a {
			font:11px/11px Arial, Verdana, Tahoma, Helvetica !important;
			text-decoration:underline !important;
		}
			.box_text a:hover {
				text-decoration:none !important;
			}
.box_error {
	background:#f7dfe2 url(i/box_icons.png) no-repeat 10px 10px;
	border-color:#f3bfc3;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #f3bfc3; /* тень справа снизу и тень внутри блока */
	behavior:url(/pie.htc); /* фикс для IE, чтобы была тень */
}
	.box_error .box_title, box_error .box_title a, .box_error .box_text a {
		color:#641f1a;
	}
.box_success {
	background:#d4ffcd url(i/box_icons.png) no-repeat 10px -152px;
	border-color:#b2dcac;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #b2dcac;
	behavior:url(/pie.htc);
}
	.box_success .box_title, box_success .box_title a, .box_success .box_text a {
		color:#4f8746;
	}
.box_warning {
	background:#fdfdcb url(i/box_icons.png) no-repeat 10px -310px;
	border-color:#e1e08d;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #e1e08d;
	behavior:url(/pie.htc);
}
	.box_warning .box_title, box_warning .box_title a, .box_warning .box_text a {
		color:#9d9c49;
	}
.box_info {
	background:#c0e9fa url(i/box_icons.png) no-repeat 10px -471px;
	border-color:#54acd0;
	box-shadow:2px 2px 4px #ddd, inset 0 0 16px #54acd0;
	behavior:url(/pie.htc);
}
	.box_info .box_title, box_info .box_title a, .box_info .box_text a {
		color:#0e7fba;
	}

Этап 3. Скрипты (не забываем подключить jquery).

<script type="text/javascript">
	$(function() {
		$('.notification_box').prepend('<a href="#" title="Закрыть" class="notification_close"><img src="i/close_box.png" alt="Закрыть" /></a>');
		$('.notification_close').click(function() {
			$(this).parent('div').fadeOut(300);
		});
	});
</script>

Все, готово.

Пример с jquery / Пример без jquery

Скачать архив с демо с использованием jquery

Скачать архив с демо без использования jquery

Схематично дизайн можно изобразить следующим способом:

Без использования js у меня в голове не родилось ни одной идеи.

Итак, какие данные мне были известны?
1. Высота шапки (135 пикселей) [header]
2. Размер отступа сверху и снизу у контентной области [container, padding-top:10px]
3. Высота отступа от макета снизу [10px]
Из неизвестных данных остается только высота подвала [footer]

Для решения этой задачи за основу я взял всегда используемый мной метод прижатия подвала и добавил к нему скриптов.
Первый этап – разметка:

<div class="header">
	some content
</div>
<div class="container">
	some content
	<div class="empty"></div>
</div>
<div class="footer">
	some content
</div>

Высота слоя empty должна быть такой же как и у слоя footer.
Теперь прописываем стили:

.header {
	height:135px;
	position:relative;
	z-index:1;
}
.container {
	background:#fff;
	padding:10px 12px 0; /* в моем случае отступа снизу не надо было */
	position:relative;
	z-index:2;
}
.footer {
	background:#433a36;
	position:relative;
	z-index:3;
}

И наконец самая главная часть – скрипты:

$(function() {
	$('.container').append('<div class="empty"></div>'); // я вынес из разметки слой и сделал его добавление через js, чтобы в случае отключенных в браузере скриптов слой footer не наползал на контентную часть
	var footerHeight = $('.footer').height(); // узнаем высоту слоя footer
	var contHeight = $(document).height() - '155'; // узнаем высоту основного слоя; 100% минус высота шапки, минус высота отступа снизу макета. Т.е. 100%-(135px+10px+10px)
	$('.container').css({'height':contHeight}); // прописываем полученную высоту основного слоя
	$('.empty').css({'height':footerHeight}); // прописываем высоту распорки empty
	$('.footer').css({'margin-top':-footerHeight}); // сдвигаем слой footer наверх на число равной его высоте и соответственно высоте распорки empty

})

После этого необходимо удалить из разметки слой empty, т.к. он только что был добавлен через js.

Посмотреть демо

Минусы использования данного метода:
1. С отключенным js высота блока не растягивается
2. Если менять высоту окна браузера, то мгновенных изменений не происходит, высота подстраивается только после перезагрузки страницы.

Понадобилось мне сменить выборку стандартного дерева категорий в shop-script’e. Не устраивало меня то, что структура у меня была следующая: одна корневая категория и уже дальше шла вложенность. Именно такая структура связана с интеграцией с 1С, а она по другому выгружать товары не умеет.

Правится это дело следующим способом. Открываем файл /published/SC/html/scripts/modules/test/class.test.php и ищем там функцию methodCategoryTree. В ней заменяем строку:

$out = catGetCategoryCompactCList( 1 );

на такую

$out = catGetCategoryCompactCList($categoryID=806);

Цифра 806 это id корневой категории, ее нужно заменить на свою.

Понадобилось мне тут на одном проекте (магазин на Shop-Script’e) сделать красивое сравнение товаров, чтобы при нажатии checkbox’а у товара менялся цвет рамки. Решение нашлось довольно быстро, спасибо гуглу

Итак, подключаем jquery и прописываем вот такой простенький кусок кода

$(function() {
	$(".compare_check").change(function() {
		if($(this).is(':checked'))
			$(this).parents('li').addClass('products_select');
		else
			$(this).parents('li').removeClass('products_select');
	});
})

Сама разметка будет вот такого вида

<input type="checkbox" value="1" name="ComparisonCheckBox_145" class="compare_check" />

Из кода скрипта видно, что при изменении состояния чекбокса, родителю li задается класс products_select, стили которому можно уже задать любые. В моем случае это была замена рамки с серой на голубую и задание небольшой тени вокруг (выглядит красиво).

Живой пример

В рамках грядущих нововведений, принято решение устроить месяц свободной регистрации на проекте Bubblebublim.ru, которая будет открыта в Пятницу 23 сентября в 23 часа по Московскому времени и продлится ровно месяц, плюс минус сутки.

Это означает, что будет выключена система регистрации только по приглашениям. Что дает возможность регистрироваться свободно.

Но это не отменяет проверки профпригодности и адекватности. Модераторы на этот период будут приведены в режим повышенной активности.

Каждый интернет-магазин хочет выделиться среди других и поэтому серьезные ребята делают свои фотографии, тщательно их обрабатывают, и им конечно не хочется, чтобы эти фотки самым наглым образом воровали. Поэтому люди и накладывают водные знаки (watermark’и) на фотки.

Водный знак будет накладываться динамически, т.е. оригиналы фоток будут неизменными. Сам скрипт я позаимствовал в интернетах и просто адаптировал для шоп-скрипта.

Итак, создаем в корне сайта папку watermark и кидаем туда два файла: watermark.php, watermark.png (содержимое файлов чуть ниже, архивом их скачать можно будет в конце поста). Содержимое файла watermark.php

<?php
	waterMark($_SERVER['DOCUMENT_ROOT'].$_SERVER['REQUEST_URI'], "watermark.png", "top=0,left=0");
	function waterMark($original, $watermark, $placement = 'top=0,left=0', $destination = null) {
		$original = urldecode($original);
		$info_o = @getImageSize($original);
		if (!$info_o)
			return false;
		$info_w = @getImageSize($watermark);
		if (!$info_w)
			return false;
		list ($vertical, $horizontal) = split(',', $placement,2);
		list($vertical, $sy) = split('=', trim($vertical),2);
		list($horizontal, $sx) = split('=', trim($horizontal),2);
		switch (trim($vertical)) {
			case 'bottom':
				$y = $info_o[1] - $info_w[1] - (int)$sy;
				break;
			case 'middle':
				$y = ceil($info_o[1]/2) - ceil($info_w[1]/2) + (int)$sy;
				break;
			default:
				$y = (int)$sy;
				break;
		}
		switch (trim($horizontal)) {
			case 'right':
				$x = $info_o[0] - $info_w[0] - (int)$sx;
				break;
			case 'center':
				$x = ceil($info_o[0]/2) - ceil($info_w[0]/2) + (int)$sx;
				break;
			default:
				$x = (int)$sx;
				break;
		}
		header("Content-Type: ".$info_o['mime']);
		$original = @imageCreateFromString(file_get_contents($original));
		$watermark = @imageCreateFromString(file_get_contents($watermark));
		$out = imageCreateTrueColor($info_o[0],$info_o[1]);
		imageCopy($out, $original, 0, 0, 0, 0, $info_o[0], $info_o[1]);
		if( ($info_o[0] > 250) && ($info_o[1] > 250) ) {
			imageCopy($out, $watermark, $x, $y, 0, 0, $info_w[0], $info_w[1]);
		}
		switch ($info_o[2]) {
			case 1:
				imageGIF($out, NULL, 100);
				break;
			case 2:
				imageJPEG($out, NULL, 100);
				break;
			case 3:
				imagePNG($out, NULL, 100);
				break;
		}
		imageDestroy($out);
		imageDestroy($original);
		imageDestroy($watermark);
		return true;
	}
?>

Теперь создаем файла .htaccess и кидаем его в папку с фотками. В зависимости от движка пути будут разные:
1. Webasyst Shop-Script – /published/publicdata/dbkey/attachments/SC/products_pictures/
2. Shop-Script Premium, Pro, Free – /products_pictures/

Содержимое файла .htaccess

<FilesMatch "\.(gif|jpeg|png|jpg)$">
	RewriteEngine On
	RewriteCond %{REQUEST_FILENAME} -f
	RewriteRule ^(.*)$ /watermark/watermark.php [T=application/x-httpd-php,L,QSA]
</FilesMatch>

Теперь на фотографиях размером больше 250 пикселей должен отображаться водный знак. Если этого не произошло, то или вы сделали что-то не так, или же на сервере установлен nginx, через который идет обработка jpeg’ов. Чтобы это исправить надо править конфиг nginx’а.

Решение для Webasyst Shop-Script. В секции location своего сайта нужно прописать

## в следующей строке заменить DBKEY на свой ключ
location ~* \/published\/publicdata\/DBKEY\/attachments\/SC\/products_pictures\/.* {
	proxy_pass http://ip_servera:8080;
	proxy_redirect     off;
	proxy_set_header   Host             $host;
	proxy_set_header   X-Real-IP        $remote_addr;
	proxy_set_header   X-Forwarded-For  $remote_addr;
	client_max_body_size       10m;
	client_body_buffer_size    128k;
	proxy_connect_timeout      70;
	proxy_send_timeout         70;
	proxy_read_timeout         70;
	proxy_buffer_size          4k;
	proxy_buffers              4 32k;
	proxy_busy_buffers_size    64k;
	proxy_temp_file_write_size 10m;
}

Решение для Shop-Script Premium/Pro/Free. В секции location своего сайта нужно прописать

location ~* \/products_pictures\/.* {
	proxy_pass http://ip_servera:8080;
	proxy_redirect     off;
	proxy_set_header   Host             $host;
	proxy_set_header   X-Real-IP        $remote_addr;
	proxy_set_header   X-Forwarded-For  $remote_addr;
	client_max_body_size       10m;
	client_body_buffer_size    128k;
	proxy_connect_timeout      70;
	proxy_send_timeout         70;
	proxy_read_timeout         70;
	proxy_buffer_size          4k;
	proxy_buffers              4 32k;
	proxy_busy_buffers_size    64k;
	proxy_temp_file_write_size 10m;
}

Обещанный архив с файлами ссылка

Сейчас на многих сайтах применяется данная фича, когда какой-либо элемент остается плавающим на странице. Это очень удобно. В интернет-магазинах обычно со страницей плавает корзина.
Итак, начнем.

Первым делом начнем с верстки.

<div class="panel default">
	Я фиксированная панель
</div>
<div class="text">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam libero in lorem semper pellentesque. Nam purus orci, ullamcorper quis dignissim in, porttitor nec tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae libero vel eros ultrices tempor in id leo. Curabitur et nunc eu neque malesuada posuere sit amet sit amet justo. Sed in blandit urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae elit ante. Nullam condimentum, velit in luctus aliquet, nisi nulla mollis tellus, eget feugiat sem felis in nisl. Cras accumsan laoreet dolor, ac tristique augue tristique vel. Etiam ut erat faucibus ipsum sagittis dignissim. Phasellus tempor felis in ipsum dignissim ultricies. Pellentesque vel tortor sem. Phasellus scelerisque volutpat faucibus. Aliquam non aliquam erat. Sed lobortis elit pretium tortor laoreet non imperdiet tellus eleifend.
</div>

Далее добавляем стили.

.panel {
	width:100%;
	height:30px;
	color:#333;
	font:16px/30px Tahoma, Helvetica, Verdana, Arial;
	background:#efefef;
	border-bottom:1px solid #ccc;
	padding:0 15px;
}
.default {
	/* стили для изначального положения */
}
.fixed {
	/* стили для плавающего положения */
	position:fixed;
	top:0;
	left:0;
}

Ну и сам код jquery плагина

$(document).ready(function() {
	if ($.browser.msie && $.browser.version.substr(0,1)<7) {}
	else {
		var panel = $('.panel'),
		pos = panel.offset();
		$(window).scroll(function() {
			if($(this).scrollTop() > pos.top+panel.height() && panel.hasClass('default')) {
				panel.removeClass('default').addClass('fixed');
			}
			else if($(this).scrollTop() <= pos.top && panel.hasClass('fixed')) {
				panel.removeClass('fixed').addClass('default');
			}
		});
	}
});

Т.е. видно что при скроллинге страницы у блока panel меняется класс с default на fixed.
Для IE6 стоит условие, чтобы код не обрабатывался, т.к. он не поддерживает css-свойство position:fixed. Кто захочет будет применять костыли, благо их очень много.
Плюсом данного метода является то, что можно задать разные стили для панели в каждом из состояний.

Демо