小新's Blog

天将降大任于斯人也，必先若其心志。
  博客园 :: 首页 :: 联系 :: 订阅 订阅 :: 管理
  3 Posts :: 0 Stories :: 17 Comments :: 0 Trackbacks
另一javascript写的类似ModalPopup的效果

这几天路由坏了不能上网，今天看见了杨丹的一片随笔，和偶一样因为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    }

第一次发代码有点乱，请见谅。
最后附上源码
posted on 2006-11-24 15:13 野原新之猪 阅读(1910) 评论(13)  编辑 收藏 网摘 所属分类: ASP.NET AJAXJavaScript

Feedback

#1楼 2006-11-24 16:16 杨丹[匿名][未注册用户]
恩，好东西。谢谢分享
  回复  引用    

#2楼 2006-12-03 11:20 Tseng      
学习
  回复  引用  查看    

#3楼 2007-01-13 10:57 学习[匿名][未注册用户]
@Tseng
不错
  回复  引用    

#4楼 2007-01-23 16:46 greki[未注册用户]
不错，学习，
  回复  引用    

#5楼 2007-02-09 11:21 雨中太阳      
发现一个问题，就是用鼠标点注册新用户框以外的地方，这个框就自动关闭了
  回复  引用  查看    

#6楼[楼主] 2007-02-16 13:17 野原新之猪      
@雨中太阳
鼠标点注册新用户框以外的地方自动关闭，是这样设置的，你可以去掉 遮掩层 的 触发js 保持状态不关闭。
  回复  引用  查看    

#7楼 2007-05-09 01:50 123456[未注册用户]
var overlay = document.createElement("div");

上面的写法是错误的，应该改为：

this.overlay = null;
this.overlay = document.createElement("div");
  回复  引用    

#8楼 2007-06-27 09:01 黑鹰      
mark
  回复  引用  查看    

#9楼 2007-08-10 00:50 i138[未注册用户]
FFOX中提示"Sys.Browser.agent === Sys.Browser.Safari"中的Sys未定义,,如何解决?
  回复  引用    

#10楼[楼主] 2007-09-03 11:06 野原新之猪      
@i138
asp.net ajax 的 JS库
  回复  引用  查看    

#11楼 2007-10-18 11:12 筱风[未注册用户]
如果按钮是放在updatepanel里的，就没有作用，闪了一下就关闭了
  回复  引用    

#12楼 2008-05-13 16:10 民资[未注册用户]
如果你的要被遮掩的div 里面有dropdownlist 这个没有办法被遮掩

  回复  引用    

#13楼 2008-09-15 17:30 ZhiQiang-ni[未注册用户]
http://weblogs.asp.net/jeff/archive/2006/10/25/Modal_2D00_style-pops-in-Javascript-and-CSS.aspx

Please refer to this one which is provided by the others.
  回复  引用    




发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 571027




相关文章:

相关链接: