Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 12.09.2016, 09:45
Интересующийся
Отправить личное сообщение для Sk1LL Посмотреть профиль Найти все сообщения от Sk1LL
 
Регистрация: 05.02.2016
Сообщений: 12

Ну давайте руссусолю, разжую.
В коде 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>
Ответить с цитированием
  #22 (permalink)  
Старый 12.09.2016, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

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>
Ответить с цитированием
  #23 (permalink)  
Старый 12.09.2016, 11:00
Интересующийся
Отправить личное сообщение для Sk1LL Посмотреть профиль Найти все сообщения от Sk1LL
 
Регистрация: 05.02.2016
Сообщений: 12

рони, вот это от души спасибо!"!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
window.location.replace(...) не могу привязать к окну, которое написано на php Million Javascript под браузер 1 09.09.2016 14:59
Не могу выучить javascript. usertest Оффтопик 17 20.03.2016 08:33
Помогите разобратся с ajax скриптом miha25 jQuery 2 06.11.2015 08:10
не могу связать ссылку HTML Шынгыс (X)HTML/CSS 1 14.07.2014 13:52
не могу разобратся в коде cyber Events/DOM/Window 1 13.05.2012 00:27