0

Есть фото на странице. При клике по нему, изображение увеличивается. Для реализации выбрал плагин Fancybox.

Всё в принципе работает, но, дело в том, что у меня зафиксировано верхнее меню и, когда появляется модальное окно с увеличенным изображением, то оно располагается как раз таки за верхним меню.

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

Как выглядит страница: 1

После открытия картинки главное меню перекрывает модальное окно 2

Стоит учесть, что картинки располагаются не в начале страницы, а после значительного скролла вниз. Немного кода. По советам добавил z-index. Меню:

<div class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50" style="z-index:99;">

Страница:

          <div class="row">
      <div class="abv " style="z-index:999;">
        <div class="col-md-6 image-service-box text-center">
           <a id="single_1" href="ссылка.jpg">
           <img src="ссылка.jpg" alt="" />
           </a>
          <h4 class="text-center"><strong>Пример 1</strong></h4>
        </div>

        <div class="col-md-6 image-service-box text-center">
           <a id="single_2" href="ссылка.jpg">
           <img src="ссылка.jpg" alt="" />
           </a>
          <h4 class="text-center"><strong>Пример 2</strong></h4>
        </div>
      </div>
      </div>

Скрипт внутри страницы:

$(document).ready(function() {
$("#single_1").fancybox({
    openEffect: "none",
    closeEffect: "none"
  });
$("#single_2").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',
});

Пробовал изменить margin, но ничего не меняется:

    $("#single_1").fancybox({
    margin:200,
    openEffect: "none",
    closeEffect: "none"
  });

При изменении padding появляется лишь рамка.

5
  • 2
    z-index?.....
    – teran
    Commented 25 нояб. 2017 в 19:27
  • @teran + margin + padding Commented 25 нояб. 2017 в 19:46
  • для блока fancybox и для меню дайте z-index. позицию для fancybox дать число выше чем для меню fancybox {z-index:999;} .menu {z-index:99;}
    – klifort
    Commented 25 нояб. 2017 в 19:57
  • Добавил z-index, но всё также безрезультатно.
    – sedilla
    Commented 26 нояб. 2017 в 6:18
  • Спасибо всем за помощь! Действительно, глубоко в css нашел установленное значение z-index: 99999 для навигационного меню.
    – sedilla
    Commented 27 нояб. 2017 в 21:37

1 ответ 1

0

Ваш пример совершенно не воспроизводим, по тому что вы пишете, можно догадываться, подключив библиотеки, ничего не становится ясно:

$(document).ready(function() {
  $("#single_1").fancybox({
    openEffect: "none",
    closeEffect: "none"
  });
  $("#single_2").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50" style="z-index:99;">123</div>

  <div class="row">
    <div class="abv " style="z-index:999;">
      <div class="col-md-6 image-service-box text-center">
        <a id="single_1" href="ссылка.jpg">
          <img src="ссылка.jpg" alt="" />
        </a>
        <h4 class="text-center"><strong>Пример 1</strong></h4>
      </div>

      <div class="col-md-6 image-service-box text-center">
        <a id="single_2" href="ссылка.jpg">
          <img src="ссылка.jpg" alt="" />
        </a>
        <h4 class="text-center"><strong>Пример 2</strong></h4>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


Могу предположить, что прописывая z-index вы не прописываете position. z-index будет работать только тогда, когда у блока прописан position: relative, fixed или absolute. Ну или возможно спорит с z-index родителя.

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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