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

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

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

Sk1LL

09.09.2016 15:30

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

рони	09.09.2016 15:40

Sk1LL,
в чём сложность написать html и css для трёх блоков?

рони	09.09.2016 15:43

Sk1LL,
допишите остальное сами

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  <!-- сюда  стили для блоков -->
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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


  </script>
</head>

<body>
<!-- сюда  ссылки и тд -->

</body>
</html>

Sk1LL

09.09.2016 15:53

рони, вы шутите или нет? Вы вообще о чем? Страница, сверстана, стили написаны, скрипт работает...

Я не могу упростить вот эту конструкцию..

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

Упростить надо потому что на странице будет более сотни ссылок. И сотня таких блоков в скрипте это ужастно.

.....

рони	09.09.2016 16:07

Sk1LL,
получите код, когда раслабитесь и напишите 10 строк, чтобы можно было понять хотбы что такое кнопка close.
макет это то что в посте 13 -- ваша страница и сотни кнопок не нужны -- нужны три кнопки для примера, но рабочие

Manyasha

09.09.2016 16:24

Цитата:

Сообщение от Sk1LL (Сообщение 428165)

рони, вы шутите или нет?

Действительно... рони, у Вас такая высокая репутация, а телепатией так и не овладели, как же так?:) На что же рассчитывать тогда нам, новичкам??:cray:

Sk1LL,

Цитата:

Сообщение от Sk1LL (Сообщение 428165)

[b]Страница, сверстана, стили написаны, скрипт работает...

А нам покажете? Тоже хотелось бы попробовать свои силы, но без элементов f1, f2, f3, notifications-full и т.д. не получается.

рони	09.09.2016 20:12

модальное окно с разным содержимым

:cray:

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
		-webkit-transition: opacity .5s;
		-moz-transition: opacity .5s;
		-ms-transition: opacity .5s;
		-o-transition: opacity .5s;
		transition: opacity .5s;
}
.popup {
	background-color: #fff;
	border: 3px solid #fff;
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 15px;
	width: 300px;
	height: auto;
	position: fixed;
	text-align: justify;
	top: 40%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	border-radius: 11px;
}
.popup .close_window {
	font-size: 13px;
	display: block;
	width: 6px;
	height: 17px;
	position: absolute;
	padding: 1px 9px 4px 9px;
	top: -15px;
	right: -15px;
	cursor: pointer;
	color: #fff;
	font-family: 'tahoma', sans-serif;
   	border-radius: 50%;
	text-align: center;
	box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
    background-color: #051fb8;
}
.popup .close_window:hover {

	background-color: #FF0000;
	border: 1px solid #00385E;
}
.popup .close_window:active {
	background: #8f9be0;
}

a[id^="f"]{
     cursor: pointer;
     display:  inline-block;
     background-color:  #0000FF;
     color: #fff;
     border-radius: 8px;
     padding: 4px 9px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(window).load(function() {
    var objHtml = {
        '#f1' : 'содержимое 1 окна',
        '#f2' : 'содержимое 2 окна',
        '#f3' : 'содержимое 3 окна'
    },
    close = $(".close_window"),
    overlay = $(".overlay"),
    modal = $("#modal").add(overlay),
    full = $("#modal-full");
    $.each(objHtml, function(id, html) {
        $(id).click(function(event) {
            event.preventDefault();
            full.html(html);
            modal.css({
                 "opacity": "1",
                 "visibility": "visible"
             })
        })
    });
    close.add(overlay).click(function() {
         modal.css({
             "opacity": "0",
             "visibility": "hidden"
         })
     })
});
  </script>
</head>

<body>

<p><a id="f1">Ссылка 1</a></p>
<p><a id="f2">Ссылка 2</a></p>
<p><a id="f3">Ссылка 3</a></p>
<div class="overlay" title="окно"></div>
<div class="popup" id="modal">
<div class="close_window">x</div>
<div id="modal-full"></div>
</div>
</body>
</html>

warren buffet

11.09.2016 06:18

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

warren buffet

11.09.2016 06:20

Цитата:

Сообщение от Sk1LL

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

Список - овердохуя.
Информации - овердохуя.
Модальное окно - 1 шт.

Все просто. Жмешь на пункт, получаешь инфу, пихаешь ее в блок.

warren buffet

11.09.2016 06:24

Тупикал задача - вывести доп-инфо из листинга в оверхдоухя тумбочек по щелчку на элементе в тумбочке. Скажем в тумбе фотка, название, цена. Щелкаем по "Быстрый просмотр" получаем блок поверх листинга с фоткой, ценой, названием, размерами, описанием и тыр-пыр.

Sk1LL

12.09.2016 09:45

Ну давайте руссусолю, разжую.
В коде Script есть повторяющиеся блоки.
Надо сделать 1, я имею ввиду ту часть которая срабатывает при клике.
То что написал рони я не совсем понимаю.
У меня не получается, я знаю что есть простейшая фича как запросить ID элемента $(this).attr('id') но как заставить сопоставить этот ID с переменной var t3 = ' ';

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style>
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}
@-webkit-keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
@keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;}
#notifications {float: left;width: 100%;overflow: hidden;height: 100%;position: relative;}
#notifications-window {height: 400px;width: 700px;position: absolute;left: 50%;top: 20%;margin-left: -352px;}
#notifications-full{height: 300px;width: 530px;background-color: rgba(0,0,0,.5);position: fixed;margin-top: 10%;margin-left: -265px;z-index: 2;left: 50%;top: 10%;}
</style>
<div id="btn1">Кнопка 1</div>
<div id="btn2">Кнопка 2</div>
<div id="btn3">Кнопка 3</div>
<div id="notifications"><div id="notifications-window"></div></div>
<script>
$(window).load(function () {
	function resize(){
		$('#notifications').height(window.innerHeight - 50);
	}
	$( window ).resize(function() {
		resize();
	});
	resize();
	function refresh_close(){
		$('.close').click(function(){
			$(this).parent().fadeOut(200);
		});
	}
	refresh_close();
	var t1 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 1</div></div>';
	var t2 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 2</div></div>';
	var t3 = '<div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text">содержимое 3</div></div>';
	$('#btn1').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t1);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
	$('#btn2').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t2);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
	$('#btn3').click(function(){
		$("#notifications-full").remove();
		$("#notifications").append(t3);
		$("#notifications-full").addClass('animated ' + 'zoomIn');
		refresh_close();
	});
});
</script>
</body>
</html>

рони	12.09.2016 10:30

Sk1LL,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<style>
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;}
@-webkit-keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);  }
  50% {opacity: 1;}
}
@keyframes zoomIn {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
  50% {opacity: 1;}
}
.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;}
#notifications {float: left;width: 100%;overflow: hidden;height: 100%;position: relative;}
#notifications-window {height: 400px;width: 700px;position: absolute;left: 50%;top: 20%;margin-left: -352px;}
#notifications-full{height: 300px;width: 530px;background-color: rgba(0,0,0,.5);position: fixed;margin-top: 10%;margin-left: -265px;z-index: 2;left: 50%;top: 10%;}
#notifications-full{
  display: none;
}

</style>
<div class="btn">Кнопка 1</div>
<div class="btn">Кнопка 2</div>
<div class="btn">Кнопка 3</div>
<div id="notifications"><div id="notifications-full"><div class="close">закрыть</div><div id="notifications-full-text"></div></div></div>
<script>
$(window).load(function () {
  function resize(){
    $('#notifications').height(window.innerHeight - 50);
  }
  $( window ).resize(resize).trigger('resize');
    $('.close').click(function(){
      $(this).parent().fadeOut(200);
    });
  var arr = ['содержимое 1','содержимое 2','содержимое 3'];
  var btn = $('.btn')
  btn.click(function(){
    var i = btn.index(this);
    $("#notifications-full-text").html(arr[i]);
    $("#notifications-full").css({display: "block"}).addClass('animated ' + 'zoomIn');

  });
});
</script>
</body>
</html>

Sk1LL

12.09.2016 11:00

рони, вот это от души спасибо!"!

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