The Colorbox plugin is installed - a jQuery lightbox on the site, for the iframe output. How can I remove the scroll bar of the main site, i.e. body. Here is a demo , there is a fifth below link to the iframe.

  • Here's an example made the link - steep
  • Body or html can have a margin and padding. They give scrolling if some element uses the size of 100% of the body - Sergey
  • It is necessary to remove the scrolling from the entire site when the pop-up window with iframe is turned on - steep

1 answer 1

Let me lend you my crutch, monsieur

Js

$(document).ready(function() { $(".iframe").colorbox({ iframe: true, width: "95%", height: "87%", fixed: "false" }); $(".iframe").click(function() { $("body").attr("style", "overflow:hidden;"); }); $("#cboxOverlay").click(function() { $("body").attr("style", "overflow:visible;"); }); });

CSS

 #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 2058; overflow: hidden; } #cboxWrapper { max-width: none; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } #cboxOverlay { background: rgba(0, 0, 0, 0.8); } #colorbox { outline: 0; } #cboxTopLeft { width: 14px; height: 14px; background: url("../images/controls.png") no-repeat 0 0; } #cboxTopCenter { height: 14px; background: url("../images/border.png") repeat-x top left; } #cboxTopRight { width: 14px; height: 14px; background: url("../images/controls.png") no-repeat -36px 0; } #cboxBottomLeft { width: 14px; height: 43px; background: url("../images/controls.png") no-repeat 0 -32px; } #cboxBottomCenter { height: 43px; background: url("../images/border.png") repeat-x bottom left; } #cboxBottomRight { width: 14px; height: 43px; background: url("../images/controls.png") no-repeat -36px -32px; } #cboxMiddleLeft { width: 14px; background: url("../images/controls.png") repeat-y -175px 0; } #cboxMiddleRight { width: 14px; background: url("../images/controls.png") repeat-y -211px 0; } #cboxContent { background: #000; overflow: visible; } .cboxIframe { background: #000; } #cboxError { padding: 50px; border: 1px solid #000; } #cboxLoadedContent { margin-bottom: 5px; } #cboxLoadingOverlay { background: url("../images/loading_background.png") no-repeat center center; } #cboxLoadingGraphic { background: url("../images/loader.gif") no-repeat center center; } #cboxTitle { position: absolute; bottom: -25px; left: 0; text-align: center; width: 100%; font-weight: bold; color: #7C7C7C; text-shadow: none; } #cboxCurrent { position: absolute; bottom: -25px; left: 58px; font-weight: bold; color: #7C7C7C; text-shadow: none; } #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; position: absolute; bottom: -29px; background: url("../images/controls.png") no-repeat 0px 0px; width: 23px; height: 23px; text-indent: -9999px; } #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; } #cboxPrevious { left: 0px; background-position: -51px -25px; } #cboxPrevious:hover { background-position: -51px 0px; } #cboxNext { left: 27px; background-position: -75px -25px; } #cboxNext:hover { background-position: -75px 0px; } #cboxClose { right: 0; background-position: -100px -25px; } #cboxClose:hover { background-position: -100px 0px; } .cboxSlideshow_on #cboxSlideshow { background-position: -125px 0px; right: 27px; } .cboxSlideshow_on #cboxSlideshow:hover { background-position: -150px 0px; } .cboxSlideshow_off #cboxSlideshow { background-position: -150px -25px; right: 27px; } .cboxSlideshow_off #cboxSlideshow:hover { background-position: -125px 0px; }

HTML

 <a href="http://www.jacklmoore.com/colorbox/" class="iframe" style="height:1000px;position:absolute">Демо</a>

In the local interpreter, something is not reproduced as in the codepen.

Here is a link to the codepen

  • Fine! Thank!!! - steep