Показать сообщение отдельно
  #10 (permalink)  
Старый 03.08.2011, 00:09
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от ctpz
щу готовый, чтобы посмотерть как сделано и сделать свой.
в гугле миллионы таких скриптов, вы просите нас искать вам решение?

примерный псевдокод для выравнивания элемента по центру:

Element.css({
	position: 'fixed',
	top : (window.height - Element.outerHeight()) / 2 + 'px',
	left : (window.width - Element.outerWidth()) / 2 +'px'
});


Есть у меня небольшой плагин (стильники и разметка на работе) с использованиеи jQuery, очень простой лайтбокс:

/**
 * Modalbox is an implementation of non-standard modal window
 * Use:
 * $('.modalbox').modalbox({
 * 		close : '.close'
 * 		fade : 100,
 * });
 * Licensed under the MIT
 *
 * @author: Alexander Guinness
 * @version: 1.0
 * @this: {jQuery Object}
 * @params {fade} sets jQuery method fadeIn();
 * @params {close} jQuery Object
 * @params {id} unique id for Modalbox
 * @date: Mon Jun 01 10:00:00 2011
**/

$.fn.extend({
	modalbox: function(options) {
	var _this = this,
		$window = $(window),
        //значения по-умолчанию
		setts = $.extend({
			fade : 300,
			close : '',
			id : '#modalbox'
		}, options),
        //выравнивание элмента по цетру
		center = function() {
			_this.css({
				position: 'fixed',
				top : ($window.height() - _this.outerHeight()) / 2 + 'px',
				left : ($window.width() - _this.outerWidth()) / 2 +'px'
			})
			.fadeIn(setts.fade);
		}
        //фотновое затемнение
		!$(setts.id)[0] ? $('<div />', {
			id : setts.id.substring(1)
		}).append(this).appendTo('body') : $(setts.id).show();
		
		$(setts.close).click(function(event) {
			$(setts.id).fadeOut(setts.fade);
			event.preventDefault();
		});
        //скрытие окна
		hideOverlay(setts.id, 'fadeOut', setts.fade);
		center();
        //пользовательское изменение размеров окна
		$window.resize(center);
		return this;
	}
});

//HIDE OVERLAY
/**
 * hideOverlay is an implementation of hideOverlay function
 * Use:  hideOverlay('id', 'fadeIn', 300);
 * Licensed under the MIT
 *
 * @author: Alexander Guiness
 * @version: 1.0
 * @params {id} HTML identifier (id, class, etc...);
 * @params {method} jQuery method (hide, show, fadeIn, etc..)
 * @params {params} jQuery method's value
 * @date: Mon Jan 01 10:00:00 2011
**/
function hideOverlay(id, method, params) {
	var $id = $(id),
	setts = {
		isVisible : function() {
			return $id.is(':visible');
		},
		isCall : function() {
			return $id[method](params);
		}
	};

	$(document).bind({
		click : function(event) {
			if(setts.isVisible() && !$(event.target).andSelf().parents(id)[0]) {
				setts.isCall();
			}
		},
		keydown : function(event) {
			if(setts.isVisible() && event.which == 27) {
				setts.isCall();
			}
		}
	});
}

Сообщение от розовый слоник
начинай копать отсюда и до забора
вообще не в тему

вот это нужно:
http://javascript.ru/blog/Andrej-Par...enta-elementov
http://javascript.ru/ui/offset+
http://javascript.ru/tutorial/events/crossbrowser

Последний раз редактировалось monolithed, 03.08.2011 в 00:15.
Ответить с цитированием