Помогите упростить код открывания панелей
Ребят, подскажите, пожалуйста.
Необходимо при клике на ссылку "а,б" открыть соответствующую панель. И затемнить экран. Закрытие этой панели происходит по кресту внутри нее и по затемнению. Написал вот такой код <div class="body-close"></div> <div class="panel-a-url">открыть панель а</div> <div class="#panel-a"><i class="panel-close">x</i>содержимое панели а</div> <div class="panel-b-url">открыть панель б</div> <div class="#panel-b"><i class="panel-close">x</i>содержимое панели б</div> ...
$("#body-close, .panel-close").click(function() {
$("#body-close").fadeOut(500);
$("html, body, #panel-a, #panel-b").removeClass("open");
})
$("#panel-a-url, #panel-b-url").click(function() {
$("html").addClass("open");
$("body").addClass("open");
$("#body-close").fadeIn(500);
})
$("#panel-a-url").click(function() {
$("#panel-a").addClass("open");
})
$("#panel-b-url").click(function() {
$("#panel-b").addClass("open");
})
Все бы хорошо, но вот таких панелей у меня будет штук 15... Подскажите, пожалуйста, как можно упростить мою писанину? |
Anrew,
не использовать id и поискать нужную "открывашка" из более 200 на форуме http://javascript.ru/forum/dom-windo...tml#post385057 |
Спасибо, рони. Это то что нужно.
Хотел плюс в карму поставить, но пишут - "нужно оставить отзыв кому-то ещё"... |
Рано радовался. На компе все отлично работает, но на мобиле некоторые блоки не открываются. И после этого перестают открываться даже те, которые открывались)))
И еще, на сайте есть несколько ссылок, при клике на которые открывается один и тот же блок, только контент меняется средством javascript. Т.е. кол-во ссылок не равно кол-ву блоков. В таком случае это скрипт закрытие блока по нажатию в любом месте открывает совсем не тот блок... Наимудрейший Рони, подскажите, пожалуйста, за счет чего происходит в этом скрипте связь ссылки с блоком? |
Цитата:
как оно у вас неизвестно, попробуте сделать макет и описание |
<div class="over">затемнение</div> <div id="url1" class="url">ссылка1<div> <div id="block1" class="block"><i>х</i></div> <div id="url2" class="url">ссылка1<div> <div id="block2" class="block"><i>х</i></div> <div id="url3" class="url">ссылка1<div> <div id="url4" class="url">ссылка1<div> <div id="block3-4" class="block"><i>х</i></div> <div id="url5" class="url">ссылка1<div> Задача: при клике на ссылку открыть соответствующий блок и добавить класс к html. Закрытие должно происходить на крест и в не области блока. Вот для такого случая существует открывашка? Весь форум перерыл. Искал и открывашка и закрывашка...))) Здесь особенность в том, что есть непарные ссылки и блоки - ссылка 3 и 4 открывает один блок с разным контентом внутри. А у ссылки 5 (в некоторых случаях) нет блока и она скрыта display: none... |
Цитата:
|
Цитата:
При клике на одну ссылку в блок подставляется один контент, при клике на другую - другой. Да это и не особо важно. Я просто написал, чтобы вопросов не было - "зачем тебе разные ссылки на однин блок..." и т.д. |
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>
|
Это то, что я ищу уже 2 дня))
Разжевали и в рот положили))) Спасибо большое. |
| Часовой пояс GMT +3, время: 04:48. |