Выезжающий блок по клику на кнопку [закрыт]

138

16 октября 2019, 04:00

нужна помощь, как сделать по клику на кнопку выезжающий блок с текстовой информацией, но блок должен появляться под определенным блоком?

Answer 1

Вариантов множество, JS, JQ, CSS..
В следующий раз задавайте вопрос как можно точнее, как и что, и желательно с примером, гадалок тут нет.

Вот пример реализации "механики" на JQ, дальше сами додумаете, или уточните - я подправлю.

$('.open-modal, .close-modal').on('click', function(){ 
  $('.modal').toggle(); 
});

.open-modal, .close-modal { 
  display: block; 
  cursor: pointer; 
} 
 
.open-modal { 
  color: green; 
} 
 
.close-modal { 
  color: red; 
  text-align: center; 
} 
 
.modal { 
  display: none; 
  width: 200px; 
  height: 100px; 
  background: #ddd; 
  position: fixed; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  z-index: 10; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="open-modal">Показать блок</div> 
<div class="modal"> 
  <div>Тут текст</div> 
  <div class="close-modal">Закрыть</div> 
</div>

Под определённым блоком?
Типо спойлера?

Что-то типо такого?

$('.item[data-for]').on('click', function(){ 
  let data = $(this).data('for'); // Определяем data 
  let item = $(data+'.hide-block'); // Ищем блок 
   
  if(item.length>0) { // Существует ли такой блок на странице 
    item.toggle(); // показываем\прячем 
  } 
});

.item { 
  display: block; 
  color: green; 
  cursor: pointer; 
} 
 
.text { 
  background: gray; 
} 
 
.hide-block { 
  display: none; 
  background: green; 
  color: #fff; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="item" data-for="#id1">Открыть блок под текстом</div> 
 
<div class="text">Какой-то текст где много букв.</div> 
<div id="id1" class="hide-block">Нужный блок</div> 
<div class="text">Какой-то текст где много букв.</div>