$(function () {
//script for popups
$('a.show_popup_objects').click(function () {
$('div.'+$(this).attr("rel")).fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
return false;
});
$('a.close').click(function () {
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
return false;
});
$(document).click(function(e){
var e = e || window.event,
x = e.srcElement || e.target;
if (x != $('.popup_objects') && !$(x).parents(' .popup_objects').size() ) {
$('.popup_objects').fadeOut();
$('#overlay').remove('#overlay');
}
});
//script for tabs
$("div.selectTabs").each(function () {
var tmp = $(this);
$(tmp).find(".lineTabs li").each(function (i) {
$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
var tab_id=i+1;
$(tmp).find(".lineTabs li").removeClass("active");
$(this).parent().addClass("active");
$(tmp).find(".tab_content div").stop(false,false).hide();
$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);
return false;
});
});
});
});
$(function () {
//script for popups
$('a.show_popup_authors').click(function () {
$('div.'+$(this).attr("rel")).fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
return false;
});
$('a.close').click(function () {
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
return false;
});
$(document).click(function(e){
var e = e || window.event,
x = e.srcElement || e.target;
if (x != $('.popup_authors') && !$(x).parents(' .popup_authors').size() ) {
$('.popup_authors').fadeOut();
$('#overlay').remove('#overlay');
}
});
//script for tabs
$("div.selectTabs").each(function () {
var tmp = $(this);
$(tmp).find(".lineTabs li").each(function (i) {
$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
var tab_id=i+1;
$(tmp).find(".lineTabs li").removeClass("active");
$(this).parent().addClass("active");
$(tmp).find(".tab_content div").stop(false,false).hide();
$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);
return false;
});
});
});
});
$(function () {
//script for popups
$('a.show_popup_sources').click(function () {
$('div.'+$(this).attr("rel")).fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
return false;
});
$('a.close').click(function () {
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
return false;
});
$(document).click(function(e){
var e = e || window.event,
x = e.srcElement || e.target;
if (x != $('.popup_sources') && !$(x).parents(' .popup_sources').size() ) {
$('.popup_sources').fadeOut();
$('#overlay').remove('#overlay');
}
});
//script for tabs
$("div.selectTabs").each(function () {
var tmp = $(this);
$(tmp).find(".lineTabs li").each(function (i) {
$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
var tab_id=i+1;
$(tmp).find(".lineTabs li").removeClass("active");
$(this).parent().addClass("active");
$(tmp).find(".tab_content div").stop(false,false).hide();
$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);
return false;
});
});
});
});
.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;
}
/* 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;
}
/* 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;
}
<div class="popup_objects objects">
<a class="close" href="#">Close</a>
<h2>ОБЪЕКТЫ МОНИТОРИНГА</h2>
</div>
<div class="popup_sources sources">
<a class="close" href="#">Close</a>
<h2>ИCТОЧНИКИ</h2>
</div>
<div class="popup_authors authors">
<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 style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ОБЪЕКТЫ</span></a></div>
<div class="link_group_block"><a class="show_popup_sources" rel="sources" href="#"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ИСТОЧНИКИ</span></a></div>
<div class="link_group_block"><a class="show_popup_authors" rel="authors" href="#"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">АВТОРЫ</span></a></div>
</div>
Вот