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>