由於滾動條寬度溢出隱藏的破壞佈局

Question

我有一個模式，當激活時禁用背景滾動（通過設置html到overflow: hidden）。

我嘗試了各種解決方案，並且由於滾動條寬度的原因，所有這些解決方案都會導致網站在激活模式時增加寬度。這裏是我的代碼：

(function ($) { 
    $.fn.extend({ 
     leanModal: function (options) { 
      var defaults = { 
       top: 100, 
       overlay: 0.5, 
       closeButton: null 
      }; 
      var overlay = $("<div id='lean_overlay'></div>"); 
      $("body").append(overlay); 
      options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       $(this).click(function (e) { 
        var modal_id = $(this).attr("href"); 
        $("#lean_overlay").click(function() { 
         close_modal(modal_id) 
        }); 
        $(o.closeButton).click(function() { 
         close_modal(modal_id) 
        }); 
        var modal_height = $(modal_id).outerHeight(); 
        var modal_width = $(modal_id).outerWidth(); 
        $("#lean_overlay").css({ 
         "display": "block", 
         opacity: 0 
        }); 
        $("#lean_overlay").fadeTo(200, o.overlay); 
        $('html').css('overflow', 'hidden'); 
        $(modal_id).css({ 
         "display": "block", 
         "position": "fixed", 
         "opacity": 0, 
         "z-index": 11000, 
         "top": o.top + "px" 
        }); 
        $(modal_id).fadeTo(200, 1); 
        e.preventDefault() 
       }) 
      }); 

      function close_modal(modal_id) { 
       $("#lean_overlay").fadeOut(200); 
       $('html').css('overflow', 'scroll'); 
       $(modal_id).css({ 
        "display": "none" 
       }) 
      } 
     } 
    }) 
})(jQuery); 

也許我可以禁用背景滾動一些其他方式？

這裏有一個小提琴：http://jsfiddle.net/p88Rt/1/

Answer 1

所以這個工作，但會讓用戶返回到頁面的頂部：

http://jsfiddle.net/p88Rt/2/

(function ($) { 
    $.fn.extend({ 
     leanModal: function (options) { 
      var defaults = { 
       top: 100, 
       overlay: 0.5, 
       closeButton: null 
      }; 
      var overlay = $("<div id='lean_overlay'></div>"); 
      $("body").append(overlay); 
      options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       $(this).click(function (e) { 
        var modal_id = $(this).attr("href"); 
        $("#lean_overlay").click(function() { 
         close_modal(modal_id) 
        }); 
        $(o.closeButton).click(function() { 
         close_modal(modal_id) 
        }); 
        var modal_height = $(modal_id).outerHeight(); 
        var modal_width = $(modal_id).outerWidth(); 
        $("#lean_overlay").css({ 
         "display": "block", 
         opacity: 0 
        }); 
        $("#lean_overlay").fadeTo(200, o.overlay); 
        $('body').css({ 
         "overflow": "hidden", 
         "height": "100%", 
         "position": "fixed" 
        }); 
        $(modal_id).css({ 
         "display": "block", 
         "position": "fixed", 
         "opacity": 0, 
         "z-index": 11000, 
         "top": o.top + "px" 
        }); 
        $(modal_id).fadeTo(200, 1); 
        e.preventDefault() 

       }) 
      }); 

      function close_modal(modal_id) { 
       $("#lean_overlay").fadeOut(200); 
       $('body').css('overflow', 'scroll'); 
       $(modal_id).css({ 
        "display": "none" 
       }) 
      } 
     } 
    }) 
    $("a[rel*=leanModal]").leanModal(); 
})(jQuery); 

有什麼建議？

Answer 2

請檢查這些更改。可能會幫助你。 在爵士小提琴變化$（ 'HTML'）。css來這一個

  $('html').css({ 
       "overflow": "hidden", 
       "width":$("body").outerWidth(), 
       }); 

並添加利潤率這種方式。根據需要，您可以更改它。

#popup { 
    width:80%; 
    height: 200px; 
    background: lightyellow; 
    margin: 10% 8.5%; 
    position: absolute; 
    display: none; 
    }