Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Наделал костылей, не могу разобратся (https://javascript.ru/forum/dom-window/64856-nadelal-kostylejj-ne-mogu-razobratsya.html)

Sk1LL 09.09.2016 14:04

Наделал костылей, не могу разобратся
 
ПРивет товарищи! :blink:

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

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

$(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();
	});
});


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

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

Спасайте!!! :help:

рони 09.09.2016 14:28

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

Sk1LL 09.09.2016 14:36

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

рони 09.09.2016 14:43

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

Sk1LL 09.09.2016 14:57

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

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

$('#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';

рони 09.09.2016 15:03

Цитата:

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

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

Sk1LL 09.09.2016 15:17

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

<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>';

?

рони 09.09.2016 15:24

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

рони 09.09.2016 15:25

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

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


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

Sk1LL 09.09.2016 15:30

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


Часовой пояс GMT +3, время: 14:35.