另一javascript写的类似ModalPopup的效果

来自小新的博客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>-->#BOX_overlay{}{
position
:absolute;
z-index
:100;
top
:0px;
left
:0px;
background-color
:#000;
filter
:alpha(opacity=60);
-moz-opacity
:0.6;
opacity
:0.6;
}

Javascript:

1 // BOX
2 function BOX_show(e) {//显示
3if($get(e)==null){return;}
4BOX_layout(e);
5window.onresize=function(){BOX_layout(e);}//改变窗体重新调整位置
6window.onscroll=function(){BOX_layout(e);}//滚动窗体重新调整位置
7}

8 function BOX_remove(e) {//移除
9window.onscroll=null;
10window.onresize=null;
11$get('BOX_overlay').style.display="none";
12$get(e).style.display="none";
13}

14 function BOX_layout(e) {//调整位置
15vara=$get(e);
16if($get('BOX_overlay')==null){//判断是否新建遮掩层
17varoverlay=document.createElement("div");
18overlay.setAttribute('id','BOX_overlay');
19overlay.onclick=function(){BOX_remove(e);};
20a.parentNode.appendChild(overlay);
21}

22//取客户端左上坐标,宽,高
23varscrollLeft=(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
24varscrollTop=(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
25varclientWidth;
26if(window.innerWidth){
27clientWidth=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerWidth:Math.min(window.innerWidth,document.documentElement.clientWidth));
28}
else{
29clientWidth=document.documentElement.clientWidth;
30}

31varclientHeight;
32if(window.innerHeight){
33clientHeight=((Sys.Browser.agent===Sys.Browser.Safari)?window.innerHeight:Math.min(window.innerHeight,document.documentElement.clientHeight));
34}
else{
35clientHeight=document.documentElement.clientHeight;
36}

37varbo=$get('BOX_overlay');
38bo.style.left=scrollLeft+'px';
39bo.style.top=scrollTop+'px';
40bo.style.width=clientWidth+'px';
41bo.style.height=clientHeight+'px';
42bo.style.display="";
43//Popup窗口定位
44a.style.position='absolute';
45a.style.zIndex=101;
46a.style.display="";
47a.style.left=scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';
48a.style.top=scrollTop+((clientHeight-a.offsetHeight)/2)+'px';
49}

第一次发代码有点乱,请见谅。
最后附上 源码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值