要js做的弹出窗口提示信息

xiaoerp

现在做rs报表，想要在页面中加个按钮，点击后弹出窗口，里面内容类似帮助信息。
希望解答的英雄给个详细说明，十分感激先~~


该贴已经同步到 xiaoerp的微博

xiaoerp

拖三个html item进来，前两个放到页面的顶部（实际上，这两个html item里一个放的是javascript函数，另一个里面放的是一个div），第三个里面是一个按钮，放在你想要放的地方。

第一个html item里的代码如下（直接拷进去就行了）
01.<script type="text/javascript" language="javascript">

02.function winopen(a,h,w)

03.{

04.       //open new window

05.        var OpenWindow=window.open(a,"newWindow","toolbar=no,scrollbars=yes,fullscreen=no,menubar=no,titlebar=no,directories=no,resizable=yes,status=no,fullscreen=no,location=no,top=0,left=0,width="+w+",height="+h+"");

06.        OpenWindow.focus();

07.}

08.function pageY(elem){

09.

10.    return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;

11.

12.}

13.function getY(e){

14.

15.    e=e||window.event;

16.

17.    return e.clientY+document.body.scrollTop;

18.

19.}

20.

21.function getElementPos(element)

22.{     

23.    var ua = navigator.userAgent.toLowerCase();

24.    var isOpera = (ua.indexOf('opera') != -1);

25.    var isIE = (ua.indexOf('msie') != -1 && !isOpera);

26.    // not opera spoof

27.    var el =element;// document.getElementById(elementId);

28.    if(el.parentNode === null || el.style.display == 'none')

29.    {

30.        return false;

31.    }

32.    var parent = null;

33.    var pos = [];

34.    var box;

35.    if(el.getBoundingClientRect)    //IE

36.   {

37.        box = el.getBoundingClientRect();

38.        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

39.        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

40.        return {x:box.left + scrollLeft, y:box.top + scrollTop};

41.    }     

42.    else if(document.getBoxObjectFor)    // gecko     

43.    {

44.        box = document.getBoxObjectFor(el);

45.        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

46.        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

47.        pos = [box.x - borderLeft, box.y - borderTop];     

48.    }   

49.    else    // safari & opera     

50.    {

51.        pos = [el.offsetLeft, el.offsetTop];

52.        parent = el.offsetParent;

53.        if (parent != el)

54.        {

55.            while (parent)

56.            {

57.                pos[0] += parent.offsetLeft;

58.                pos[1] += parent.offsetTop;

59.                parent = parent.offsetParent;            

60.            }

61.        }

62.        if (ua.indexOf('opera') != -1  || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))

63.       {

64.           pos[0] -= document.body.offsetLeft;

65.           pos[1] -= document.body.offsetTop;         

66.        }

67.    }

68.    if (el.parentNode)

69.    {

70.        parent = el.parentNode;

71.    }

72.    else

73.    {

74.        parent = null;

75.    }

76.    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')

77.    {

78.        // account for any scrolled ancestors

79.        pos[0] -= parent.scrollLeft;

80.        pos[1] -= parent.scrollTop;

81.        if (parent.parentNode) { parent = parent.parentNode; }          else { parent = null; }     }     return {x:pos[0], y:pos[1]}; }

82.

83.function GetPageScroll()

84.{  

85.    var x, y;

86.    if(window.pageYOffset)

87.    {

88.        // all except IE   

89.       y = window.pageYOffset;   

90.       x = window.pageXOffset;  

91.    }

92.    else if(document.documentElement && document.documentElement.scrollTop)

93.    {

94.        // IE 6 Strict   

95.        y = document.documentElement.scrollTop;

96.        x = document.documentElement.scrollLeft;  

97.    }

98.    else if(document.body)

99.    {   

100.        // all other IE   

101.        y = document.body.scrollTop;   

102.        x = document.body.scrollLeft;   

103.     }  return {X:x, Y:y};

104.}

105.

106.function setX(elem,pos){

107.

108.    elem.style.left=pos+"px";

109.

110.}   

111.

112.function setY(elem,pos){

113.

114.    elem.style.top=pos+"px";

115.

116.}

117.function show(elem){

118.

119.    elem.style.display=elem.$oldDisplay||"";

120.

121.}

122.

123.//show div

124.function ShowChart(obj,a)

125.    {

126.        var o=document.getElementById("divChart");

127.        var x=(document.body.offsetWidth-650)/2;

128.        var pos=getElementPos(obj);

129.        var y=0;

130.        //y=(document.body.offsetHeight-400)/2;

131.          y=pos.y;

132.        //(document.body.offsetHeight-400)/2;

133.        //o.style.left=x;

134.        //o.style.top=y;

135.        //o.style.display='';

136.        var f=document.getElementById("frameChart");

137.        f.src=a;

138.        show(o);

139.        if(x<0) x=0;

140.        y=y-o.offsetHeight+200;

141.        var scpos=GetPageScroll();

142.        y=y+scpos.Y;

143.        //alert(scpos.Y);

144.        if(y<0) y=0;

145.        setX(o,x);

146.        setY(o,y);

147.//        show(o);

148.    }

149.

150.//hide div

151.function HideChart()

152.    {

153.        var o=document.getElementById("divChart");

154.        o.style.display='none';

155.    }

156.

157.</script>
复制代码第二个html item里的代码（直接拷进来，实际上这里是放了一个div，里面有一个iframe用于显示实际内容，如果你是静态内容，把iframe去掉，可以直接写进去就行了，我这里是因为要打开一个只有图表的新报表，所以用了iframe。
里面的<img alt="Close" onclick="HideChart();" src="../samples/images/close.gif" />这个小图标是一个“关闭”的叉叉图标，
onclick="HideChart();" 的时候隐藏这个div。）：
01.<div id="divChart" style="background-color:white; width: 650px;

02.    height: 400px; position:absolute; border: solid 2px blue; display: none;">

03.     <div style="width:100%; text-align:right;"><img alt="Close" onclick="HideChart();" src="../samples/images/close.gif" /></div>

04.     <div style="width:100%; text-align:center;">

05.     <iframe frameborder="0" id="frameChart" scrolling="no" src="" height="360px" width="630px"></iframe></div>

06.     <div style="text-align:center; height=30px"><input type="button" onclick="HideChart();" value="Close"></div>

07.</div>
复制代码第三个html item里面放那个按钮（直接拷贝就行，点击这个按钮显示上面定义的div）：
01.<input id=''Button1'' type=''button'' value=''help'' onclick=''javascript:ShowChart(this,URL);''/>
复制代码这个按钮里的onclick=''javascript:ShowChart(this,URL);是执行第一个html item 里的ShowChart(this,URL)函数，我这里是要传递那个图表报表的URL，所以带了一个URL参数，你可以改一个这个函数，去掉URL参数，直接show 那个div就行了。

那个showchart里我试了好多种办法想让弹出的窗口置于窗口正中，但是IE7下老是有问题,好象是那个offsetTop有问题，垂直高度总是不能居中，不知道谁做成过，可以共享一下。