另一javascript写的类似ModalPopup的效果

另一javascript写的类似ModalPopup的效果

这几天路由坏了不能上网，今天看见了杨丹的一片随笔，和偶一样因为ModalPopupExtender 不能激发服务器端事件而郁闷半天。我也用Javascript写了个类似ModalPopup的效果，相比之下代码多了点，但是加了个小功能（从ModalPopup的JS里面提取的，嘿嘿！）。

改变窗体、滚动窗体，漂浮窗口，也随之变化，点击旁边遮掩层（半透明的）可以 关闭浮动窗口。

效果如下：


调整大小：


滚动窗体：


帖代码。。。
CSS：

遮掩层
#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) { //显示
 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 野原新之猪 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/xiaoxinzhu/archive/2006/11/24/571027.html