Njeee,
<!DOCTYPE html><html class=''>
<head>
<meta charset="utf-8">
<style class="cp-pen-styles">.box.show { visibility: visible; opacity: 1; }
.box{
background-color: green;
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;
}</style></head><body>
<html><head>
<script>
function init() {
var form = document.querySelectorAll('.box'),
tel = document.querySelectorAll('.openbox'),
open;
document.onclick = function(event) {
var elem = event.target;
if (elem.classList.contains('openbox')) {
for (var i = 0; i < tel.length; i++) {
if (elem === tel[i]) form[i].classList.toggle("show")
else form[i].classList.remove("show")
}
return false;
}
}
}
window.onload = init;
</script>
</head>
<body>
<div class="mainbar">
<div class="box">
<h2>TEST1</h2>
<p>Текст№1</p>
</div>
<div class="box">
<h2>TEST2</h2>
<p>Текст№2</p>
</div>
<div class="box">
<h2>TEST3</h2>
<p>Текст№3</p>
</div>
</div>
<a href="#" class="openbox">test 1</a>
<a href="#" class="openbox">test 2</a>
<a href="#" class="openbox">test 3</a>
</body>
</html>
</body></html>