Вывод текста из спойлера в центр

230

01 апреля 2018, 18:21

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

$(document).ready(function() { 
 
  $('.spoiler_links').each(function() { 
 
   $(this).click(function(e) { 
      e.preventDefault(); //отменяем стандартное действие ссылки 
      $('.spoiler_body').not($(this).next()).each(function() { 
        $(this).hide(); 
      }); 
 
      $(this).next('.spoiler_body').fadeToggle(500); 
    }); 
  }); 
});

.spoiler-wrap{ 
  margin: 0 0 8px;} 
 
.spoiler-head{ 
  cursor: pointer; 
  padding: 5px;} 
 
.spoiler-wrap .disabled .spoiler-body{ 
    display: none;} 
a.s2-item.spoiler_links { 
  margin: 30px 0 18px;} 
.spoiler_body { 
  display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
 
<div class="all"> 
<div class="spoiler-wrap disabled"> 
 
 
  <a href="#w" class="month spoiler_links"> 
    <div class="number r1"> 
      <div class="number2"> 
        <b>1</b> 
        <p>месяц</p> 
      </div> 
    </div> 
    <div class="transit t1"> 
      <img src="img/arrow-long.png" alt=""> 
    </div> 
  </a> 
 
<div class="spoiler-body spoiler_body"> 
  <div class="spoiler-body2 spoiler_body2"> 
    <p class="choice">ваш выбор</p> 
    <div class="number"> 
      <div class="number2"> 
        <b>1</b> 
        <p>месяц</p> 
      </div> 
    </div> 
  </div> 
</div> 
 
</div> 
 
 
<div class="spoiler-wrap disabled"> 
 
<a href="#w" class="month spoiler_links"> 
  <div class="number"> 
    <div class="number2"> 
      <b>3</b> 
      <p>месяца</p> 
    </div> 
  </div> 
  <div class="transit t2"> 
    <img src="img/arrow-long.png" alt=""> 
  </div> 
</a> 
 
<div class="spoiler-body spoiler_body"> 
  <div class="spoiler-body2 spoiler_body2"> 
    <p class="choice">ваш выбор</p> 
    <div class="number"> 
      <div class="number2"> 
        <b>3</b> 
        <p>месяца</p> 
      </div> 
    </div> 
  </div> 
</div> 
 
</div> 
</div>

Answer 1

Для начала исправьте ошибки в Вашем коде. Любая ссылка - это строчный элемент, а div - блочный. Нельзя размещать внутри строчных блочные элементы, наоборот - можно.

<a><div>ссылка</div></a> - так нельзя
<div><a>ссылка</a></div> - так можно

Также в коде много лишних блоков и классов, но если это часть от какого-то другого кода, то оставляем как есть.

В JS нет смысла писать цикл, т.к. событие клика происходит на элементе по которому кликнули, т.е. обработчик сработает именно на этом элементе.

$(document).ready(function() { 
   $('.spoiler_links').click(function(e) { 
      e.preventDefault(); 
      $('.spoiler_body').hide(); 
      $(this).next().fadeIn(500); 
    }); 
});

.spoiler-wrap{ 
  margin: 0 0 8px; 
  display: flex; 
} 
 
.spoiler-head{ 
  cursor: pointer; 
  padding: 5px;} 
 
.spoiler-wrap .disabled .spoiler-body{ 
    display: none;} 
a.s2-item.spoiler_links { 
  margin: 30px 0 18px;} 
.spoiler_body { 
  display:none; 
} 
.spoiler-body { 
  margin: auto; 
  display: none; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="all"> 
  <div class="spoiler-wrap disabled"> 
 
    <a href="#w" class="month spoiler_links"> 
      <span class="number r1"> 
        <span class="number2"> 
          <b>1</b> 
          <span>месяц</span> 
        </span> 
      </span> 
      <span class="transit t1"> 
        <img src="img/arrow-long.png" alt=""> 
      </span> 
    </a> 
 
    <div class="spoiler-body spoiler_body"> 
      <div class="spoiler-body2 spoiler_body2"> 
        <p class="choice">ваш выбор</p> 
        <div class="number"> 
          <div class="number2"> 
            <b>1</b> 
            <p>месяц</p> 
          </div> 
        </div> 
      </div> 
    </div> 
 
  </div> 
   
  <div class="spoiler-wrap disabled"> 
    <a href="#w" class="month spoiler_links"> 
      <span class="number"> 
        <span class="number2"> 
          <b>3</b> 
          <span>месяца</span> 
        </span> 
      </span> 
      <span class="transit t2"> 
        <img src="img/arrow-long.png" alt=""> 
      </span> 
    </a> 
 
    <div class="spoiler-body spoiler_body"> 
      <div class="spoiler-body2 spoiler_body2"> 
      <p class="choice">ваш выбор</p> 
      <div class="number"> 
        <div class="number2"> 
          <b>3</b> 
          <p>месяца</p> 
        </div> 
      </div> 
    </div> 
  </div> 
 
</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Внутренние тени slick-slider

Нужно сделать внутренние тени в slick-slider, как показано на рисунке:

218

CSS

Убрать в Head подключаемые стили

Всем привет! Есть проблема в head CMS Wordpress добавляется портянка стилей на +200 строк, вопрос, как убрать лишний код id='hybridextend-style-inline-css' и просто...

213

CSS

Пункт меню с вложенным списком не остается активным

Приветствую! Есть менюУ одного пункта этого меню есть вложенный список

242

CSS

Как спрятать псевдоэлементы before и after на медиазапрсах?

Здравствуйте, подскажите пожалуйста, как спрятать псевдоэлементы на медиазапросах? и почему display: none; не срабатывает?

229