virtas,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.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: 323px;
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;
background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
background: -moz-linear-gradient(top, #3d51c8, #051fb8);
background: -o-linear-gradient(top, #3d51c8, #051fb8);
background: -ms-linear-gradient(top, #3d51c8, #051fb8);
background: linear-gradient(top, #3d51c8, #051fb8);
background-color: #3d51c8;
border: 1px solid #061fb8;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
text-align: center;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_window:hover {
background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
background: -o-linear-gradient(top, #051fb8, #3d51c8);
background: -ms-linear-gradient(top, #051fb8, #3d51c8);
background: linear-gradient(top, #051fb8, #3d51c8);
background-color: #051fb8;
border: 1px solid #00385E;
}
.popup .close_window:active {
background: #8f9be0;
}
.open_window{
cursor: pointer;
display: block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var open = $(".open_window"),
popup = $(".popup"),
close = $(".close_window"),
overlay = $(".overlay");
open.each(function(indx, el) {
$(el).click(function() {
popup.eq(indx).add(overlay).css({
"opacity": "1",
"visibility": "visible"
})
})
});
close.add(overlay).click(function() {
popup.add(overlay).css({
"opacity": "0",
"visibility": "hidden"
})
})
});
</script>
</head>
<body>
<a class="open_window"href="#">Окно</a>
<a class="open_window"href="#">ещё Окно</a>
<a class="open_window"href="#">и ещё Окно</a>
<div class="overlay" title="окно"></div>
<div class="popup">
<div class="close_window">x</div>
<p>Тут будет текст 1</p>
</div>
<div class="popup">
<div class="close_window">x</div>
<p>ещё Тут будет текст 2</p>
</div>
<div class="popup">
<div class="close_window">x</div>
<p>и ещё Тут будет текст 3</p>
</div>
</body>
</html>