Comment faire pour arrêter le corps de défilement en arrière-plan quand un modal/lightbox est ouvert

Question

J'utilise le plugin jquery de lightbox pour ouvrir une lightbox lorsqu'un utilisateur clique sur un produit. Souvent, le contenu de la visionneuse s'étend sous le pli, et pour le moment la barre de défilement droite déplace la page entière lorsque vous faites défiler vers le bas. Je voudrais que ça fonctionne comme la pinterest lightbox, où la barre de défilement de droite ne fait que défiler la lightbox, et le reste de la page reste fixe. J'ai vu quelques messages à ce sujet, mais rien ne semble fonctionner pour moi.

Le problème est que je veux que la visionneuse défile si le contenu est plus grand que la fenêtre d'affichage du navigateur mais pas l'arrière-plan.

J'ai attrapé ce script lightbox d'ici:

// ----------------------------- -------------------------------------------------- ---- // // Lightbox v2.04 // par Lokesh Dhakar - http://www.lokeshdhakar.com // Dernière mise à jour: 2/9/08 // // For plus d'infos, visitez: // http://lokeshdhakar.com/projects/lightbox2/ // // Licensed sous la

-------------------------------------------- ---------------------------------------/*

CSS:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} 
#lightbox img{ width: auto; height: auto;} 
#lightbox a img{ border: none; } 

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } 
#imageContainer{ padding: 10px; } 

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } 
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } 
#imageContainer>#hoverNav{ left: 0;} 
#hoverNav a{ outline: none;} 

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image2/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } 
#prevLink { left: 0; float: left;} 
#nextLink { right: 0; float: right;} 
#prevLink:hover, #prevLink:visited:hover { background: url(../images2/prevlabel.gif) left 15% no-repeat; } 
#nextLink:hover, #nextLink:visited:hover { background: url(../images2/nextlabel.gif) right 15% no-repeat; } 

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } 

#imageData{ padding:0 10px; color: #666; } 
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; } 
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}  

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } 

JSS:

Table of Contents 
    ----------------- 
    Configuration 

    Lightbox Class Declaration 
    - initialize() 
    - updateImageList() 
    - start() 
    - changeImage() 
    - resizeImageContainer() 
    - showImage() 
    - updateDetails() 
    - updateNav() 
    - enableKeyboardNav() 
    - disableKeyboardNav() 
    - keyboardAction() 
    - preloadNeighborImages() 
    - end() 

    Function Calls 
    - document.observe() 

*/ // ----------------------------------------------------------------------------------- 

// // Configurationl // LightboxOptions = Object.extend({ 
    fileLoadingImage:  'images2/loading.gif',  
    fileBottomNavCloseImage: 'images2/closelabel.gif', 

    overlayOpacity: 0.8, // controls transparency of shadow overlay 

    animate: true,   // toggles resizing animations 
    resizeSpeed: 7,  // controls the speed of the image resizing animations (1=slowest and 10=fastest) 

    borderSize: 10,   //if you adjust the padding in the CSS, you will need to update this variable 

    // When grouping images this is used to write: Image # of #. 
    // Change it for non-english localization 
    labelImage: "Image", 
    labelOf: "of" }, window.LightboxOptions || {}); 

// 
----------------------------------------------------------------------------------- 

var Lightbox = Class.create(); 

Lightbox.prototype = { 
    imageArray: [], 
    activeImage: undefined, 

    // initialize() 
    // Constructor runs on completion of the DOM loading. Calls updateImageList and then 
    // the function inserts html at the bottom of the page which is used to display the shadow 
    // overlay and the image container. 
    // 
    initialize: function() {  

     this.updateImageList(); 

     this.keyboardAction = this.keyboardAction.bindAsEventListener(this); 

     if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; 
     if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; 

     this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; 
     this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration 

     // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. 
     // If animations are turned off, it will be hidden as to prevent a flicker of a 
     // white 250 by 250 box. 
     var size = (LightboxOptions.animate ? 250 : 1) + 'px'; 


     // Code inserts html at the bottom of the page that looks similar to this: 
     // 
     // <div id="overlay"></div> 
     // <div id="lightbox"> 
     //  <div id="outerImageContainer"> 
     //   <div id="imageContainer"> 
     //    <img id="lightboxImage"> 
     //    <div style="" id="hoverNav"> 
     //     <a href="#" id="prevLink"></a> 
     //     <a href="#" id="nextLink"></a> 
     //    </div> 
     //    <div id="loading"> 
     //     <a href="#" id="loadingLink"> 
     //      <img src="images/loading.gif"> 
     //     </a> 
     //    </div> 
     //   </div> 
     //  </div> 
     //  <div id="imageDataContainer"> 
     //   <div id="imageData"> 
     //    <div id="imageDetails"> 
     //     <span id="caption"></span> 
     //     <span id="numberDisplay"></span> 
     //    </div> 
     //    <div id="bottomNav"> 
     //     <a href="#" id="bottomNavClose"> 
     //      <img src="images/close.gif"> 
     //     </a> 
     //    </div> 
     //   </div> 
     //  </div> 
     // </div> 


     var objBody = $$('body')[0]; 

     objBody.appendChild(Builder.node('div',{id:'overlay'})); 

     objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ 
      Builder.node('div',{id:'outerImageContainer'}, 
       Builder.node('div',{id:'imageContainer'}, [ 
        Builder.node('img',{id:'lightboxImage'}), 
        Builder.node('div',{id:'hoverNav'}, [ 
         Builder.node('a',{id:'prevLink', href: '#' }), 
         Builder.node('a',{id:'nextLink', href: '#' }) 
        ]), 
        Builder.node('div',{id:'loading'}, 
         Builder.node('a',{id:'loadingLink', href: '#' }, 
          Builder.node('img', {src: LightboxOptions.fileLoadingImage}) 
         ) 
        ) 
       ]) 
      ), 
      Builder.node('div', {id:'imageDataContainer'}, 
       Builder.node('div',{id:'imageData'}, [ 
        Builder.node('div',{id:'imageDetails'}, [ 
         Builder.node('span',{id:'caption'}), 
         Builder.node('span',{id:'numberDisplay'}) 
        ]), 
        Builder.node('div',{id:'bottomNav'}, 
         Builder.node('a',{id:'bottomNavClose', href: '#' }, 
          Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) 
         ) 
        ) 
       ]) 
      ) 
     ])); 


     $('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); 
     $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this)); 
     $('outerImageContainer').setStyle({ width: size, height: size }); 
     $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this)); 
     $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this)); 
     $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); 
     $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); 

     var th = this; 
     (function(){ 
      var ids = 
       'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 
       'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose'; 
      $w(ids).each(function(id){ th[id] = $(id); }); 
     }).defer(); 
    }, 

    // 
    // updateImageList() 
    // Loops through anchor tags looking for 'lightbox' references and applies onclick 
    // events to appropriate links. You can rerun after dynamically adding images w/ajax. 
    // 
    updateImageList: function() { 
     this.updateImageList = Prototype.emptyFunction; 

     document.observe('click', (function(event){ 
      var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); 
      if (target) { 
       event.stop(); 
       this.start(target); 
      } 
     }).bind(this)); 
    }, 

    // 
    // start() 
    // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. 
    // 
    start: function(imageLink) {  

     $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); 

     // stretch overlay to fill page and fade in 
     var arrayPageSize = this.getPageSize(); 
     $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); 

     new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); 

     this.imageArray = []; 
     var imageNum = 0;  

     if ((imageLink.rel == 'lightbox')){ 
      // if image is NOT part of a set, add single image to imageArray 
      this.imageArray.push([imageLink.href, imageLink.title]);   
     } else { 
      // if image is part of a set.. 
      this.imageArray = 
       $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). 
       collect(function(anchor){ return [anchor.href, anchor.title]; }). 
       uniq(); 

      while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } 
     } 

     // calculate top and left offset for the lightbox 
     var arrayPageScroll = document.viewport.getScrollOffsets(); 
     var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight()/10); 
     var lightboxLeft = arrayPageScroll[0]; 
     this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); 

     this.changeImage(imageNum); 
    }, 

    // 
    // changeImage() 
    // Hide most elements and preload image in preparation for resizing image container. 
    // 
    changeImage: function(imageNum) { 

     this.activeImage = imageNum; // update global var 

     // hide elements during transition 
     if (LightboxOptions.animate) this.loading.show(); 
     this.lightboxImage.hide(); 
     this.hoverNav.hide(); 
     this.prevLink.hide(); 
     this.nextLink.hide(); 
     // HACK: Opera9 does not currently support scriptaculous opacity and appear fx 
     this.imageDataContainer.setStyle({opacity: .0001}); 
     this.numberDisplay.hide();  

     var imgPreloader = new Image(); 

     // once image is preloaded, resize image container 


     imgPreloader.onload = (function(){ 
      this.lightboxImage.src = this.imageArray[this.activeImage][0]; 
      this.resizeImageContainer(imgPreloader.width, imgPreloader.height); 
     }).bind(this); 
     imgPreloader.src = this.imageArray[this.activeImage][0]; 
    }, 

    // 
    // resizeImageContainer() 
    // 
    resizeImageContainer: function(imgWidth, imgHeight) { 

     // get current width and height 
     var widthCurrent = this.outerImageContainer.getWidth(); 
     var heightCurrent = this.outerImageContainer.getHeight(); 

     // get new width and height 
     var widthNew = (imgWidth + LightboxOptions.borderSize * 2); 
     var heightNew = (imgHeight + LightboxOptions.borderSize * 2); 

     // scalars based on change from old to new 
     var xScale = (widthNew/widthCurrent) * 100; 
     var yScale = (heightNew/heightCurrent) * 100; 

     // calculate size difference between new and old image, and resize if necessary 
     var wDiff = widthCurrent - widthNew; 
     var hDiff = heightCurrent - heightNew; 

     if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
     if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 

     // if new and old image are same size and no scaling transition is necessary, 
     // do a quick pause to prevent image flicker. 
     var timeout = 0; 
     if ((hDiff == 0) && (wDiff == 0)){ 
      timeout = 100; 
      if (Prototype.Browser.IE) timeout = 250; 
     } 

     (function(){ 
      this.prevLink.setStyle({ height: imgHeight + 'px' }); 
      this.nextLink.setStyle({ height: imgHeight + 'px' }); 
      this.imageDataContainer.setStyle({ width: widthNew + 'px' }); 

      this.showImage(); 
     }).bind(this).delay(timeout/1000); 
    }, 

    // 
    // showImage() 
    // Display image and begin preloading neighbors. 
    // 
    showImage: function(){ 
     this.loading.hide(); 
     new Effect.Appear(this.lightboxImage, { 
      duration: this.resizeDuration, 
      queue: 'end', 
      afterFinish: (function(){ this.updateDetails(); }).bind(this) 
     }); 
     this.preloadNeighborImages(); 
    }, 

    // 
    // updateDetails() 
    // Display caption, image number, and bottom nav. 
    // 
    updateDetails: function() { 

     // if caption is not null 
     if (this.imageArray[this.activeImage][1] != ""){ 
      this.caption.update(this.imageArray[this.activeImage][1]).show(); 
     } 

     // if image is part of set display 'Image x of x' 
     if (this.imageArray.length > 1){ 
      this.numberDisplay.update(LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show(); 
     } 

     new Effect.Parallel(
      [ 
       new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
       new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 
      ], 
      { 
       duration: this.resizeDuration, 
       afterFinish: (function() { 
        // update overlay size and update nav 
        var arrayPageSize = this.getPageSize(); 
        this.overlay.setStyle({ height: arrayPageSize[1] + 'px' }); 
        this.updateNav(); 
       }).bind(this) 
      } 
     ); 
    }, 

    // 
    // updateNav() 
    // Display appropriate previous and next hover navigation. 
    // 
    updateNav: function() { 

     this.hoverNav.show();    

     // if not first image in set, display prev image button 
     if (this.activeImage > 0) this.prevLink.show(); 

     // if not last image in set, display next image button 
     if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show(); 

     this.enableKeyboardNav(); 
    }, 

    // 
    // enableKeyboardNav() 
    // 
    enableKeyboardNav: function() { 
     document.observe('keydown', this.keyboardAction); 
    }, 

    // 
    // disableKeyboardNav() 
    // 
    disableKeyboardNav: function() { 
     document.stopObserving('keydown', this.keyboardAction); 
    }, 

    // 
    // keyboardAction() 
    // 
    keyboardAction: function(event) { 
     var keycode = event.keyCode; 

     var escapeKey; 
     if (event.DOM_VK_ESCAPE) { // mozilla 
      escapeKey = event.DOM_VK_ESCAPE; 
     } else { // ie 
      escapeKey = 27; 
     } 

     var key = String.fromCharCode(keycode).toLowerCase(); 

     if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox 
      this.end(); 
     } else if ((key == 'p') || (keycode == 37)){ // display previous image 
      if (this.activeImage != 0){ 
       this.disableKeyboardNav(); 
       this.changeImage(this.activeImage - 1); 
      } 
     } else if ((key == 'n') || (keycode == 39)){ // display next image 
      if (this.activeImage != (this.imageArray.length - 1)){ 
       this.disableKeyboardNav(); 
       this.changeImage(this.activeImage + 1); 
      } 
     } 
    }, 

    // 
    // preloadNeighborImages() 
    // Preload previous and next images. 
    // 
    preloadNeighborImages: function(){ 
     var preloadNextImage, preloadPrevImage; 
     if (this.imageArray.length > this.activeImage + 1){ 
      preloadNextImage = new Image(); 
      preloadNextImage.src = this.imageArray[this.activeImage + 1][0]; 
     } 
     if (this.activeImage > 0){ 
      preloadPrevImage = new Image(); 
      preloadPrevImage.src = this.imageArray[this.activeImage - 1][0]; 
     } 

    }, 

    // 
    // end() 
    // 
    end: function() { 
     this.disableKeyboardNav(); 
     this.lightbox.hide(); 
     new Effect.Fade(this.overlay, { duration: this.overlayDuration }); 
     $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); 
    }, 

    // 
    // getPageSize() 
    // 
    getPageSize: function() { 

     var xScroll, yScroll; 

     if (window.innerHeight && window.scrollMaxY) { 
      xScroll = window.innerWidth + window.scrollMaxX; 
      yScroll = window.innerHeight + window.scrollMaxY; 
     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
      xScroll = document.body.scrollWidth; 
      yScroll = document.body.scrollHeight; 
     } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
      xScroll = document.body.offsetWidth; 
      yScroll = document.body.offsetHeight; 
     } 

     var windowWidth, windowHeight; 

     if (self.innerHeight) { // all except Explorer 
      if(document.documentElement.clientWidth){ 
       windowWidth = document.documentElement.clientWidth; 
      } else { 
       windowWidth = self.innerWidth; 
      } 
      windowHeight = self.innerHeight; 
     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
      windowWidth = document.documentElement.clientWidth; 
      windowHeight = document.documentElement.clientHeight; 
     } else if (document.body) { // other Explorers 
      windowWidth = document.body.clientWidth; 
      windowHeight = document.body.clientHeight; 
     } 

     // for small pages with total height less then height of the viewport 
     if(yScroll < windowHeight){ 
      pageHeight = windowHeight; 
     } else { 
      pageHeight = yScroll; 
     } 

     // for small pages with total width less then width of the viewport 
     if(xScroll < windowWidth){ 
      pageWidth = xScroll;   
     } else { 
      pageWidth = windowWidth; 
     } 

     return [pageWidth,pageHeight]; 
    } } 

document.observe('dom:loaded', function() { new Lightbox(); }); 

Answer 1

Selon this question est aussi simple que l'ajout overflow: hidden à votre corps lorsque vous affichez la visionneuse et overflow: auto lorsque vous cachez .