рони,
<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> Смотрите, overlay, чтобы при клике вне окна, оно закрывалось. laimas, Большое спасибо за дельные ответы, эх, реализовать бы еще, изначально знал, что мудрил сильно и делал не верно, но просто пока знаний не хватает, чтобы реализовать по другому, думал, что все можно решить проще. |
Вот, собственно CSS
.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; |
Lucard IV,
это кнопки а далее? Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Lucard IV,
смотрите тут http://javascript.ru/forum/jquery/54...tml#post362759 вам только изменить классы в коде на свои |
Прошу прощения, сейчас оформлю, как надо.
|
$(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>
Вот |
рони,
Надеюсь, что действительно есть выход с простым изменением классов. |
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>
|
рони,
Хорошо, сейчас попробую. |
рони,
Спасибо, все почти работает, но есть беда, при нажатии на первый пункт меню открывается следующий, при нажатии на следующий, открывается следующий вновь.( <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_leaders authors leaders"> <a class="close" href="#">Close</a> <h2>ЛИДЕРЫ</h2> </div> <div class="popup_authors authors popup"> <a class="close" href="#">Close</a> <h2>АВТОРЫ</h2> </div> <div class="popup_tonality tonality popup"> <a class="close" href="#">Close</a> <h2>ТОНАЛЬНОСТЬ</h2> </div> <div class="link_group"> <div class="link_group_block"><a class="show_popup_period" rel="period" href="#"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ПЕРИОД</span></a></div> <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 class="link_group_block"><a class="show_popup_leaders" rel="leaders" href="#"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ЛИДЕРЫ</span></a></div> <div class="link_group_block"><a class="show_popup_tonality" rel="tonality" href="#"><span style="border-bottom: 1px dashed #595a5d; margin-left: 30px;">ТОНАЛЬНОСТЬ</span></a></div> </div>
<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>
.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;
}
|
| Часовой пояс GMT +3, время: 11:18. |