来自小新的博客http://www.cnblogs.com/xiaoxinzhu/archive/2006/11/24/571027.html
这几天路由坏了不能上网,今天看见了杨丹的一片随笔,和偶一样因为ModalPopupExtender 不能激发服务器端事件而郁闷半天。我也用Javascript写了个类似ModalPopup的效果,相比之下代码多了点,但是加了个小功能(从ModalPopup的JS里面提取的,嘿嘿!)。
改变窗体、滚动窗体,漂浮窗口,也随之变化,点击旁边遮掩层(半透明的)可以 关闭浮动窗口。
效果如下:
调整大小:
滚动窗体:
帖代码。。。
CSS:


<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->












Javascript:
1
//
BOX
2
function
BOX_show(e)
{//显示
3
if($get(e)==null)
{return;}
4
BOX_layout(e);
5
window.onresize=function()
{BOX_layout(e);}//改变窗体重新调整位置
6
window.onscroll=function()
{BOX_layout(e);}//滚动窗体重新调整位置
7
}
8
function
BOX_remove(e)
{//移除
9
window.onscroll=null;
10
window.onresize=null;
11
$get('BOX_overlay').style.display="none";
12
$get(e).style.display="none";
13
}
14
function
BOX_layout(e)
{//调整位置
15
vara=$get(e);
16
if($get('BOX_overlay')==null)
{//判断是否新建遮掩层
17
varoverlay=document.createElement("div");
18
overlay.setAttribute('id','BOX_overlay');
19
overlay.onclick=function()
{BOX_remove(e);};
20
a.parentNode.appendChild(overlay);
21
}
22
//取客户端左上坐标,宽,高
23
varscrollLeft=(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
24
varscrollTop=(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
25
varclientWidth;
26
if(window.innerWidth)
{
27
clientWidth=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerWidth:Math.min(window.innerWidth,document.documentElement.clientWidth));
28
}else
{
29
clientWidth=document.documentElement.clientWidth;
30
}
31
varclientHeight;
32
if(window.innerHeight)
{
33
clientHeight=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerHeight:Math.min(window.innerHeight,document.documentElement.clientHeight));
34
}else
{
35
clientHeight=document.documentElement.clientHeight;
36
}
37
varbo=$get('BOX_overlay');
38
bo.style.left=scrollLeft+'px';
39
bo.style.top=scrollTop+'px';
40
bo.style.width=clientWidth+'px';
41
bo.style.height=clientHeight+'px';
42
bo.style.display="";
43
//Popup窗口定位
44
a.style.position='absolute';
45
a.style.zIndex=101;
46
a.style.display="";
47
a.style.left=scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
48
a.style.top=scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
49
}

2



3



4

5



6



7

8



9

10

11

12

13

14



15

16



17

18

19



20

21

22

23

24

25

26



27

28



29

30

31

32



33

34



35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

第一次发代码有点乱,请见谅。
最后附上 源码