Modified Fancybox Modal layout in background
So, on my website, every time I click on a thumbnail, the Bootstrap modal launches as expected, but with a slight error ... all the layout in the background (except the footer) tilts to the right by about 20px. When the modal is closed, the layout slides back into place.
Can someone help me solve this problem, or at least give some hints as to what might be causing this?
source to share
This is due to Fancybox . It sets the class fancybox-lock
in the tag body
and adds to it margin-right: 15px;
.
<body class="fancybox-lock" style="margin-right: 15px;">
Here's the style:
.fancybox-lock {
overflow: hidden;
}
You can notice the affected parts of the page when you click on the elements if you are using Firebug for Firefox for example.
This is what should happen. Note that when not fancybox
, there are scrollbars on the page. This pushes the content to the left to accommodate the scrollbars. When you click on a thumbnail, it fancybox
acts and removes the scrollbars from the page, see overflow:hidden
, and the page content simply moves to the right to where it was previously used by the scrollbars.
source to share
find these classes in fancybox and make sure the content below matches
.fancybox-lock .fancybox-overlay {
overflow-y: none;
}
and this one
.fancybox-overlay {
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
source to share