Форум

Anrew · #1 (**permalink**) 13.10.2015, 00:55

Ребят, подскажите, пожалуйста.
Необходимо при клике на ссылку "а,б" открыть соответствующую панель. И затемнить экран. Закрытие этой панели происходит по кресту внутри нее и по затемнению.
Написал вот такой код

<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... Подскажите, пожалуйста, как можно упростить мою писанину?

рони · #2 (**permalink**) 13.10.2015, 01:27

Anrew,
не использовать id и поискать нужную "открывашка" из более 200 на форуме
Закрытие блока по нажатию в любом месте

Anrew · #3 (**permalink**) 13.10.2015, 09:09

Спасибо, рони. Это то что нужно.
Хотел плюс в карму поставить, но пишут - "нужно оставить отзыв кому-то ещё"...

Anrew · #4 (**permalink**) 13.10.2015, 19:36

Рано радовался. На компе все отлично работает, но на мобиле некоторые блоки не открываются. И после этого перестают открываться даже те, которые открывались)))

И еще, на сайте есть несколько ссылок, при клике на которые открывается один и тот же блок, только контент меняется средством javascript. Т.е. кол-во ссылок не равно кол-ву блоков. В таком случае это скрипт закрытие блока по нажатию в любом месте открывает совсем не тот блок...

Наимудрейший Рони, подскажите, пожалуйста, за счет чего происходит в этом скрипте связь ссылки с блоком?

рони · #5 (**permalink**) 13.10.2015, 19:41

Сообщение от Anrew

за счет чего происходит в этом скрипте связь ссылки с блоком?

там кол-во ссылок равно кол-ву блоков
как оно у вас неизвестно, попробуте сделать макет и описание

Anrew · #6 (**permalink**) 14.10.2015, 20:43

<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...

рони · #7 (**permalink**) 14.10.2015, 21:15

Сообщение от Anrew

открывает один блок с разным контентом внутри

это как?

Anrew · #8 (**permalink**) 14.10.2015, 21:30

Сообщение от рони

это как?

Рони, спасибо что опять откликнулись)))

При клике на одну ссылку в блок подставляется один контент, при клике на другую - другой.

Да это и не особо важно. Я просто написал, чтобы вопросов не было - "зачем тебе разные ссылки на однин блок..." и т.д.

рони · #9 (**permalink**) 14.10.2015, 22:22

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>

Anrew · #10 (**permalink**) 14.10.2015, 23:04

Это то, что я ищу уже 2 дня))
Разжевали и в рот положили)))
Спасибо большое.

Форум

Справочник

Discord чат

Курсы javascript