1

$('#example').popover(options)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info-content" class="info-content" style="cursor: pointer;">
  <div class="info-content-title">
    <div class="g-item" onclick="$('#info-content-body-1').toggle();">TEST</div>
    <div id="info-content-body-1" style="z-index: 100;display: none;">
      <div class="info-close">
        <a href="#" onclick="document.getElementById('info-content-body-1').style.display = 'none'; return false">
          <img src="/media/maps/info_close.gif" alt="Закрыть">
        </a>
      </div>
      <div class="info-content-body-item">Адрес: {{shop.addres}}</div>
      <div class="info-content-body-item">Часы работы: {{shop.workhours}}</div>
      <div class="info-content-body-item">Телефоны: {{shop.phones}}</div>
      <div class="info-content-body-link"><a href="/page/contact_maps/?shop={{shop.city.pk}}">Показать на карте</a>
      </div>
      <strong>{{metro.city.other_information}}</strong>
      {%endfor%}
    </div>

    <div id="info-content" class="info-content" style="cursor: pointer;">
      <div class="info-content-title">
        <div class="g-item" onclick="$('#info-content-body-2').toggle();">TEST2</div>
        <div id="info-content-body-2" style="z-index: 100;display: none;">
          <div class="info-close">
            <a href="#" onclick="document.getElementById('info-content-body-2').style.display = 'none'; return false">
              <img src="/media/maps/info_close.gif" alt="Закрыть">
            </a>
          </div>
          <div class="info-content-body-item">Адрес: {{shop.addres}}</div>
          <div class="info-content-body-item">Часы работы: {{shop.workhours}}</div>
          <div class="info-content-body-item">Телефоны: {{shop.phones}}</div>
          <div class="info-content-body-link"><a href="/page/contact_maps/?shop={{shop.city.pk}}">Показать на карте</a>
          </div>
          <strong>{{metro.city.other_information}}</strong>
          {%endfor%}
        </div>

https://jsfiddle.net/mukav1bp/

сейчас при нажатии на TEST вылазит блок и двигает TEST2 вниз, я хочу чтоб он вылазил поверх TEST2 и не нарушал мне структуру

3
  • предоставьте код, плиз. могу предположить, что у TEST необходимо занать position:absolute 16 апр 2015 в 13:54
  • Используйте кнопку "вставить фоагмент" для добавления кода. Вопрос должен быть самодостаточным, ссылки на JSFiddle могут служить только дополнением.
    – Kyubey
    16 апр 2015 в 18:51
  • @user1931070 Если вам дам исчерпывающий ответ, отметьте его как правильный. 17 апр 2015 в 13:46

1 ответ 1

2

Для всплывающих блоков пропишите абсолютное позиционирование.
Пример:

#info-content-body-1 {
    position:absolute;
    background: #fff;
}
1
  • во!! супер, спс
    – John Doe
    16 апр 2015 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.