bubanay,
<!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.getElementById('cl'), tel = document.getElementById('zvonok');
document.onclick = function(event) {
var elem = event.target;
event.target === tel && form.classList.toggle("show");
if (elem === form || form.contains(elem) || event.target === tel) return false;
form.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<a href="#" id="zvonok">Звонок</a>
<div id="cl"> <form action="http://">
<h4>test</h4>
</form>
</div>
</body>
</html>