Ну давайте руссусолю, разжую.
В коде 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>
