Наделал костылей, не могу разобратся

[Sk1LL]

ПРивет товарищи!

Есть страница, на ней список длинный.
При нажатии на пункт списка нужно модальное окно, с информацией относящейся к пункту.

Надыбал в инете простейший скрипт.

$(window).load(function () {
	function resize(){
		$('#modal').height(window.innerHeight - 50);
	}
	$( window ).resize(function() {
		resize();
	});
	resize();
	function refresh_close(){
		$('.close').click(function(){
			$(this).parent().fadeOut(200);
		});
	}
	refresh_close();

	var fb1 = '<div id="modal-full">содержимое 1 окна</div>';
	var fb2 = '<div id="modal-full">содержимое 2 окна</div>';
	var fb3 = '<div id="modal-full">содержимое 3 окна</div>';

	$('#f1').click(function(){
		$("#modal-full").remove();
		$("#modal").append(fb1);
		$("#modal-full").addClass('animated ' + 'effect1');
		refresh_close();
	});

	$('#f2').click(function(){
		$("#modal-full").remove();
		$("#modal").append(fb2);
		$("#modal-full").addClass('animated ' + 'effect1');
		refresh_close();
	});

	$('#f3').click(function(){
		$("#modal-full").remove();
		$("#modal").append(fb3);
		$("#modal-full").addClass('animated ' + 'effect1');
		refresh_close();
	});
});

Как вы понимаете, если строк ОВЕР ДОХУЯ МНОГО, то скрипт получается тяжелым и тормозящим пребывание на странице...

Как упростить хотя бы последнюю часть скрипта...

Спасайте!!!

[рони]

Sk1LL,
что есть .close ? и зачем на этот элемент вешать обработку клика бесконечно?

[Sk1LL]

рони, крестик в углу модального окна. Там же вроде время затухание указано.

[рони]

Sk1LL,
тот же самый вопрос зачем строки 24, 31, 38? может макет сделать?

[Sk1LL]

рони, ничего не могу ответить

не могу понять как макет из этого сделать:

$('#f1').click(function(){
	        $("#modal-full").remove();
	        $("#modal").append(fb1);
	        $("#modal-full").addClass('animated ' + 'effect1');
	        refresh_close();
});

Ибо свыше 100 строк, и соответственно 100 таких блоков кода...
Логику понимаю работы, но написать не могу ((

$('.button').click(function(){
//клик по любой ссылке с классом button
	        $("#modal-full").remove();
// убираем модальное окно
	        $("#modal").append(infoN);
// добавляем блоку #modal содержимое VAR с именем infoN - где N = ID нажатой кнопки
	        $("#modal-full").addClass('animated ' + 'effect1');
// ну и анимируем
	        refresh_close();
// добавляем кнопке .close функцию удаления окна и затухания
});

не могу сообразить как заставить добавлять в модальное окно инфу соответствующую var fb1 = 'инфа1';

[рони]

не могу понять как макет из этого сделать:

надо добавить html и css для кода в 1 посте, чтобы его можно было запустить.

[Sk1LL]

рони, не-не это все есть. Общий вид всего этого выглядит так.

<div id="modal"></div>

в него мы добавляем содержимое

var fb1 = '<div id="modal-full">содержимое 1 окна</div>';

ладно фиг с ним что будет var fb2, fb3, fb4 и т.д.

Но как сделать что бы получить ID нажатого пункта, пункты выглядят так:

<p><a id="f1">Ссылка 1</a></p>
<p><a id="f2">Ссылка 2</a></p>
<p><a id="f3">Ссылка 3</a></p>

я все что не могу понять как заставить по нажатию например ссылки f3 залить в блок с id="modal-full инфу именно из переменной var fb3 = '<div id="modal-full">содержимое 3 окна</div>';

?

[рони]

Sk1LL,
сделайте макет, если конечно вам нужна помощь.

[рони]

Sk1LL,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Sk1LL]

Нужна помощ. Сам не могу разобраться..