Есть фото на странице. При клике по нему, изображение увеличивается. Для реализации выбрал плагин Fancybox
.
Всё в принципе работает, но, дело в том, что у меня зафиксировано верхнее меню и, когда появляется модальное окно с увеличенным изображением, то оно располагается как раз таки за верхним меню.
Как можно настроить отступ для появляющегося окна, чтобы оно было ниже, или же, чтобы появляющееся изображение было на первом плане, а остальное затемнялось?
После открытия картинки главное меню перекрывает модальное окно
Стоит учесть, что картинки располагаются не в начале страницы, а после значительного скролла вниз. Немного кода. По советам добавил 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 появляется лишь рамка.
z-index
?.....fancybox {z-index:999;}
.menu {z-index:99;}