这几天路由坏了不能上网,今天看见了杨丹的一片随笔,和偶一样因为ModalPopupExtender 不能激发服务器端事件而郁闷半天。我也用Javascript写了个类似ModalPopup的效果,相比之下代码多了点,但是加了个小功能(从ModalPopup的JS里面提取的,嘿嘿!)。
改变窗体、滚动窗体,漂浮窗口,也随之变化,点击旁边遮掩层(半透明的)可以 关闭浮动窗口。
效果如下:
调整大小:
滚动窗体:
帖代码。。。
CSS:
遮掩层
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 var a = $get(e);
16 if ($get('BOX_overlay')==null){ //判断是否新建遮掩层
17 var overlay = document.createElement("div");
18 overlay.setAttribute('id','BOX_overlay');
19 overlay.onclick=function(){BOX_remove(e);};
20 a.parentNode.appendChild(overlay);
21 }
22 //取客户端左上坐标,宽,高
23 var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
24 var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
25 var clientWidth;
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 var clientHeight;
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 var bo = $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 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 var a = $get(e);
16 if ($get('BOX_overlay')==null){ //判断是否新建遮掩层
17 var overlay = document.createElement("div");
18 overlay.setAttribute('id','BOX_overlay');
19 overlay.onclick=function(){BOX_remove(e);};
20 a.parentNode.appendChild(overlay);
21 }
22 //取客户端左上坐标,宽,高
23 var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
24 var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
25 var clientWidth;
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 var clientHeight;
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 var bo = $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 }
第一次发代码有点乱,请见谅。
最后附上源码