【www.gdgbn.com--jquery】

jquery.ui.dialog 1.81在ie8中出现滚动条失效解决方法

var dialog = $("#divdialog").dialog({
 autoopen:false
 ,width:350
 ,height:160
 ,buttons:{
  "确认":function(){
   $(this).dialog("close");
  }
 }
 ,title:"提示:"
 ,modal:true
 ,resizable:false
});
1.注释掉js文件中控置"背景层"宽、高的代码,改由css教程文件.
    2.在open dialog时将overflow设为hidden, dialog close时将overflow设为auto。

这两种方案都能够解决问题,但并非从问题的症结处解决.如果能够找到造成该原因的代码,那样会更好(其实问题很明了).
分析: open dialog 出现滚动条是因为内容区("背景层")尺寸超出了父容器可视区.在jquery.ui.dialog.js 源文件中,如下代码在此处创建"背景层",背景层 宽,高均在此处设定的:

//742 行 jquery ui dialog 1.8.10

var $el = (this.oldinstances.pop() || $("").addclass("ui-widget-overlay"))
.appendto(document.body)
.css({
 width: this.width(),
 height: this.height()
});


//747 行
其中设置宽高的代码为this.width()与this.height(),对应方法如下:
//777 行

height: function() {
  var scrollheight,
   offsetheight;
  // handle ie 6
  if ($.browser.msie && $.browser.version < 7) {
   scrollheight = math.max(
    document.documentelement.scrollheight,
    document.body.scrollheight
   );
   offsetheight = math.max(
    document.documentelement.offsetheight,
    document.body.offsetheight
   );

   if (scrollheight < offsetheight) {
    return $(window).height() + "px";
   } else {
    return scrollheight + "px";
   }
  // handle "good" browsers
  } else {
   return $(document).height() + "px";
  }
 },

 width: function() {
  var scrollwidth,
   offsetwidth;
  // handle ie 6
  if ($.browser.msie && $.browser.version < 7 ) {
   scrollwidth = math.max(
    document.documentelement.scrollwidth,
    document.body.scrollwidth
   );
   offsetwidth = math.max(
    document.documentelement.offsetwidth,
    document.body.offsetwidth
   );

   if (scrollwidth < offsetwidth) {
    return $(window).width() + "px";
   } else {
    return scrollwidth + "px";
   }
  // handle "good" browsers
  } else {
   return $(document).width() + "px";
  }
 },


//825 行
在获得浏览器窗口尺寸时,作者只对ie6做兼容处理.而实际上ie7,ie8也应该在兼容处理的范围内. 因此移除掉 "$.browser.version < 7" 便能获得浏览器真实尺寸了.如下是更改后代码:

//777 行
height: function() {
  var scrollheight,
   offsetheight;
  // handle ie 6
  if ($.browser.msie ) {
   scrollheight = math.max(
    document.documentelement.scrollheight,
    document.body.scrollheight
   );
   offsetheight = math.max(
    document.documentelement.offsetheight,
    document.body.offsetheight
   );

   if (scrollheight < offsetheight) {
    return $(window).height() + "px";
   } else {
    return scrollheight + "px";
   }
  // handle "good" browsers
  } else {
   return $(document).height() + "px";
  }
 },

 width: function() {
  var scrollwidth,
   offsetwidth;
  // handle ie 6
  if ($.browser.msie ) {
   scrollwidth = math.max(
    document.documentelement.scrollwidth,
    document.body.scrollwidth
   );
   offsetwidth = math.max(
    document.documentelement.offsetwidth,
    document.body.offsetwidth
   );

   if (scrollwidth < offsetwidth) {
    return $(window).width() + "px";
   } else {
    return scrollwidth + "px";
   }
  // handle "good" browsers
  } else {
   return $(document).width() + "px";
  }
 },


//825 行
经测试 ie6,ie7,ie8 open dialog(设置 modal:true ),open dialog 后均没有滚动条

本文来源:http://www.gdgbn.com/wangyezhizuo/29335/