这几天路由坏了不能上网,今天看见了杨丹的一片随笔,和偶一样因为ModalPopupExtender 不能激发服务器端事件而郁闷半天。我也用Javascript写了个类似ModalPopup的效果,相比之下代码多了点,但是加了个小功能(从ModalPopup的JS里面提取的,嘿嘿!)。
改变窗体、滚动窗体,漂浮窗口,也随之变化,点击旁边遮掩层(半透明的)可以 关闭浮动窗口。
效果如下:
调整大小:
滚动窗体:
帖代码。。。
CSS:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
Javascript:
1
//
BOX
2![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
BOX_show(e)
{ //显示
3![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if($get(e)==null)
{return;}
4
BOX_layout(e);
5![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.onresize = function()
{BOX_layout(e);} //改变窗体重新调整位置
6![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.onscroll = function()
{BOX_layout(e);} //滚动窗体重新调整位置
7
}
8![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
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![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
BOX_layout(e)
{ //调整位置
15
var a = $get(e);
16![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ($get('BOX_overlay')==null)
{ //判断是否新建遮掩层
17
var overlay = document.createElement("div");
18
overlay.setAttribute('id','BOX_overlay');
19![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (window.innerWidth)
{
27
clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
28![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
29
clientWidth = document.documentElement.clientWidth;
30
}
31
var clientHeight;
32![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (window.innerHeight)
{
33
clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
34![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} 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
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
3
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
4
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
6
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
7
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
8
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
9
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
15
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
17
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
20
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
27
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
29
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
33
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
35
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
37
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
第一次发代码有点乱,请见谅。
最后附上 源码