CODEWITHSUNDEEP
fancyboxfancybox-3
Iworb
Iworb

Reputation: 532

Fancybox 3 and responsive background

There's a problem with fancybox modals on a scrollable page with fluid containers. In example below when you open modal fancybox right side of a background stretched a bit, because new modal have no vertical scrollbar. After modal was closed background size was corrected again.

.container {
  margin: 40px;
  padding: 20px;
  height: 200vh;
  background-color: bisque;
  transition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>

<div class="container">
 <div>
   Some content
 </div>
 <a data-fancybox data-src="#hidden-content" href="javascript:;">
   Open fancybox
 </a>
</div>
<div style="display: none;" id="hidden-content">
	<h2>Hello</h2>
	<p>You are awesome.</p>
</div>

Upvotes: 0

Views: 894

Answers (1)

Janis
Janis

Reputation: 8769

Simply, add body { margin: 0; }

body { margin: 0; }

.container {
  margin: 40px;
  padding: 20px;
  height: 200vh;
  background-color: bisque;
  xtransition: 3s all linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet"/>

<div class="container">
 <div>
   Some content
 </div>
 <a data-fancybox data-src="#hidden-content" href="javascript:;">
   Open fancybox
 </a>
</div>
<div style="display: none;" id="hidden-content">
	<h2>Hello</h2>
	<p>You are awesome.</p>
</div>

Upvotes: 1

Related Questions