关于 ajaxToolkit:ModalPopupExtender 弹出窗口在IE弹出时“游走”的问题。

                        关于 ajaxToolkit:ModalPopupExtender 弹出窗口在IE弹出时“游走”的问题。

 

    这个问题我感觉不算是个bug，但是项目经理要我改。。。悲剧！

 

    大致看一下这个问题，大概（我）是IE浏览器解析的原因， 弹出窗口弹出可以分为两个步骤：1.通过计算让弹出窗口在浏览器中间显示。2.

 

显示弹出窗口。

 

     IE可能多线程吧，在第一步还没有计算好的情况下，第二部就开始执行了。（FF下就没有这个问题）。

 

     最后想到了一个办法（之前想了很多，这个办法不行就放弃了,呵呵）

 

    1。就是将弹出窗口内加一次div，IE还在计算将弹出窗口在浏览器中间显示时，我先将这个div显示出来，然后再0.1后，将我计算出来的位

 

置去掉，这样是为了弹出窗口还能拖动。

 

 

    于是我就想办法将加的div如何在浏览器中间显示，第一是css，要用到position，top，left。

 

      1.查了position的属性：这个属性定义建立元素布局所用的定位机制。

 

 

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

 

          最后确定fixed值，符合我的要求。

 

       2. 计算top和left的值，这个要获取浏览器的可见区域的高度和宽度。

 

 

 

//在IE、FireFox、Opera下都可以使用   document.body.clientWidth   document.body.clientHeight   //即可获得，很简单，很方便。   //而在公司项目当中：   //Opera仍然使用   document.body.clientWidth   document.body.clientHeight   //可是IE和FireFox则使用   document.documentElement.clientWidth   document.documentElement.clientHeight   //原来是W3C的标准在作怪啊   //http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   //如果在页面中添加这行标记的话   //在IE中：   document.body.clientWidth ==> BODY对象宽度   document.body.clientHeight ==> BODY对象高度   document.documentElement.clientWidth ==> 可见区域宽度   document.documentElement.clientHeight ==> 可见区域高度   //在FireFox中：   document.body.clientWidth ==> BODY对象宽度   document.body.clientHeight ==> BODY对象高度   document.documentElement.clientWidth ==> 可见区域宽度   document.documentElement.clientHeight ==> 可见区域高度   ?   //在Opera中：    document.body.clientWidth ==> 可见区域宽度   document.body.clientHeight ==> 可见区域高度   document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）   document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）   //而如果没有定义W3C的标准，则   //IE为：   document.documentElement.clientWidth ==> 0   document.documentElement.clientHeight ==> 0   //FireFox为：   document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）   //Opera为：   document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

 

 

最后选择了，document.documentElement.clientWidth
                  document.documentElement.clientHeight 

 

这是不断尝试的结果，呵呵！！！

 

 

       3.现在就是想如何居中公式了，其实很简单，稍微想一下就可以了。

 

           top：浏览器的可见区域高度-弹出窗口的高度/2

 

           left:同理； 

 

最后就搞定了，呵呵！！！

 

最后还是搞砸了，晕！！

     

       最后居然是这三句话就搞定了。。。。

        $("div[id='" + nameAll + "']").css("display", "none");
        window.setTimeout("", 100);
        $("div[id='" + nameAll + "']").fadeIn("normal");