Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html,body{margin:0;min-height:100%}
.url{cursor:pointer}
.block{display:none;width:300px;height:200px;line-height:200px;position:fixed;top:50%;left:50%;margin-top:-100px;margin-left:-150px;background:#E99B63;border-radius:5px;text-align:center;z-index:11}
.block.open{display:block}
.close{display:inline-block;float:right;line-height:10px;margin-right:12px;margin-top:12px;cursor:pointer;padding:4px;background:#FF0;border-radius:50%}
.over{display:none}
.over.open{display:block;position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5);z-index:10}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var d = $(".url"),
b = $(".block"),
c = $(".over");
d.click(function() {
var a = $(this).data("block");
a && (b.not(a).removeClass("open"), $(a).toggleClass("open"), c.toggleClass("open", $(".open").length))
});
$("html").click(function(a) {
$(a.target).closest(".block, .url").length && !$(a.target).is(".close") || b.add(c).removeClass("open")
})
});
</script>
</head>
<body>
<div class="over"></div>
<div id="url1" class="url" data-block="#block1">ссылка1</div>
<div id="block1" class="block">блок 1<i class="close">х</i></div>
<div id="url2" class="url" data-block="#block2">ссылка2</div>
<div id="block2" class="block">блок 2<i class="close">х</i></div>
<div id="url3" class="url" data-block="#block3-4">ссылка3-4</div>
<div id="url4" class="url" data-block="#block3-4">ссылка3-4</div>
<div id="block3-4" class="block" >блок 3-4<i class="close">х</i></div>
<div id="url5" class="url">ссылка1</div>
</body>
</html>