<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cl.show { visibility: visible; opacity: 1; }
.cl{
background-color: #D2B48C;
border: 3px solid #8B4513;
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>
<script>
function init() {
var form = document.querySelectorAll('.cl'),
tel = document.querySelectorAll('.zvonok'),
open;
document.onclick = function(event) {
var elem = event.target;
if (open && (elem === open || open.contains(elem))) return false;
if (elem.classList.contains('zvonok')) {
for (var i = 0; i < tel.length; i++) {
if (elem === tel[i]) break
}
if (open && open !== form[i]) open.classList.remove("show");
open = form[i];
open.classList.toggle("show");
return false;
}
open && open.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<a href="#" class="zvonok" >Звонок</a>
<div class="cl">
<h4>test</h4>
</div>
<a href="#" class="zvonok">Звонок2</a>
<div class="cl">
<h4>test2</h4>
</div>
<a href="#" class="zvonok">Звонок3</a>
<div class="cl">
<h4>test3</h4>
</div>
</body>
</html>