There is a photo on the page. When you click on it, the image is enlarged. To implement the chosen plugin Fancybox .

Everything basically works, but the fact is that I have the top menu fixed and, when a modal window appears with an enlarged image, it is located just behind the top menu.

How can I adjust the indent for the appearing window so that it is lower, or so that the appearing image is in the foreground and the rest is darkened?

How the page looks like: one

After opening the picture, the main menu overlaps the modal window 2

It should be noted that the pictures are not located at the beginning of the page, but after a significant scroll down. Some code. Advice added z-index. Menu:

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

Page:

  <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 inside page:

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

Tried to change the margin, but nothing changes:

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

When you change the padding, only a frame appears.

  • one
    z-index ? ..... - teran
  • @teran + margin + padding - Daniel
  • for the fancybox block and for the menu, give the z-index. position for fancybox give a number higher than for menu fancybox {z-index:999;} .menu {z-index:99;} - klifort
  • Added z-index, but all to no avail. - sedilla
  • Thank you all for the help! Indeed, deep in css found the set value of z-index: 99999 for the navigation menu. - sedilla

1 answer 1

Your example is completely non-reproducible; by what you write, you can guess by connecting libraries, nothing becomes clear:

 $(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>

I can assume that prescribing z-index you do not prescribe position . z-index will only work if the block has position: relative , fixed or absolute . Well, or perhaps arguing with the parent's z-index .