Lucard IV,
открывашка 206
c css вы сами разберитесь - добавлен класс popup для блоков
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.link_group_block {
}
.link_group {
display: block;
font-family: Scada, sans-serif;
font-size: 16pt;
color: #6f7074;
}
.link_group a {
display: inline-block;
width:100%;
padding-top: 15px;
padding-bottom: 15px;
}
.link_group a:hover, .link_group a:focus, .link_group a:active {
width:100%;
background: #595a5d;
color: #cbcdd3;
padding-top: 15px;
padding-bottom: 15px;
}
/* Styles Popup Objects */
.popup_objects {
padding:20px 30px 20px;
position:fixed;
top: 140px;
display:none;
border:1px solid #f28c26;
background:#fbfbfb;
z-index:100;
}
.popup_objects:after, .popup_objects:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index:100;
}
.popup_objects:after {
border-color: rgba(251, 251, 251, 0);
border-right-color: #fbfbfb;
border-width: 15px;
margin-top: -15px;
z-index:100;
}
.popup_objects:before {
border-color: rgba(242, 140, 38, 0);
border-right-color: #f28c26;
border-width: 16px;
margin-top: -16px;
z-index:100;
}
.popup_objects h2 {
font-family: Scada, sans-serif;
font-size: 22pt;
color: #535558;
text-align: left;
margin-bottom: 5px;
}
.popup_objects a.close {
width:10px;
height:15px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background: url(../images/close_b.png) no-repeat #000000;
}
/* Styles Popup Sources */
.popup_sources {
padding:20px 30px 20px;
position:fixed;
top: 170px;
display:none;
border:1px solid #f28c26;
background:#fbfbfb;
z-index:100;
}
.popup_sources:after, .popup_sources:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index:100;
}
.popup_sources:after {
border-color: rgba(251, 251, 251, 0);
border-right-color: #fbfbfb;
border-width: 15px;
margin-top: -15px;
z-index:100;
}
.popup_sources:before {
border-color: rgba(242, 140, 38, 0);
border-right-color: #f28c26;
border-width: 16px;
margin-top: -16px;
z-index:100;
}
.popup_sources h2 {
font-family: Scada, sans-serif;
font-size: 22pt;
color: #535558;
text-align: left;
}
.popup_sources a.close {
width:10px;
height:15px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background: url(../images/close_b.png) no-repeat #000000;
}
/* Styles Popup Authors */
.popup_authors {
padding:20px 30px 20px;
position:fixed;
top: 180px;
display:none;
border:1px solid #f28c26;
background:#fbfbfb;
z-index:100;
}
.popup_authors:after, .popup_authors:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index:100;
}
.popup_authors:after {
border-color: rgba(251, 251, 251, 0);
border-right-color: #fbfbfb;
border-width: 15px;
margin-top: -15px;
z-index:100;
}
.popup_authors:before {
border-color: rgba(242, 140, 38, 0);
border-right-color: #f28c26;
border-width: 16px;
margin-top: -16px;
z-index:100;
}
.popup_authors h2 {
font-family: Scada, sans-serif;
font-size: 22pt;
color: #535558;
text-align: left;
}
.popup_authors a.close {
width:10px;
height:15px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background: url(../images/close_b.png) no-repeat #000000;
}
.link_group span{
border-bottom: 1px dashed #595a5d; margin-left: 30px;
}
.active{
background: #595a5d;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $but = $(".link_group_block a"),
$blocks = $(".popup");
$but.each(function(i, elem) {
var $el = $(elem);
$el.click(function() {
$but.not($el).removeClass("active");
$el.toggleClass("active");
$blocks.each(function(j, el) {
$(el)["fade" + (i == j ? "Toggle" : "Out")]();
});
})
});
$('html, .close').click(function (event) {
if ($(event.target).closest('.link_group, .popup' ).size() && !$(event.target).is('.close')) return;
$but.filter('.active').click()
});
});
</script>
</head>
<body> <div class="popup_objects objects popup">
<a class="close" href="#">Close</a>
<h2>ОБЪЕКТЫ МОНИТОРИНГА</h2>
</div>
<div class="popup_sources sources popup">
<a class="close" href="#">Close</a>
<h2>ИCТОЧНИКИ</h2>
</div>
<div class="popup_authors authors popup">
<a class="close" href="#">Close</a>
<h2>АВТОРЫ</h2>
<input type="authors" placeholder="Начните вводить имя автора..." name="go" class="block-a">
</div>
<div class="link_group">
<div class="link_group_block"><a class="show_popup_objects" rel="objects" href="#"><span >ОБЪЕКТЫ</span></a></div>
<div class="link_group_block"><a class="show_popup_sources" rel="sources" href="#"><span >ИСТОЧНИКИ</span></a></div>
<div class="link_group_block"><a class="show_popup_authors" rel="authors" href="#"><span >АВТОРЫ</span></a></div>
</div>
</body>
</html>