模拟网页对话框

szjiang

浏览: 12373 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (6)

社区版块

存档分类

CSS Microsoft

css 代码

公司有个项目中的一个功能需要频繁的用到打开窗口操作，window.open()和window.showModalDialog()方法均感觉有点不合适。无奈之举，只能自己用层模拟一个了。

首先要定义个用户锁屏的DIV层；样式如下：

css 代码

#screenDiv{
width:100%;
height:100%;
background:#cccccc;
position:absolute;
left:0;rightright:0;top:0;
filter:alpha(opacity=50);
display:none;
}

再定义三个层，分别用于标题，关闭按钮，信息。对应的样式如下：

css 代码

#infoDiv {
position:absolute;
width:0px;
height:0px;
z-index:10;
border:1px solid #000000;
background-color: #FFFFFF;
visibility: inherit;
display:none;
}
#closeDiv {
position:absolute;
width:15px;
height:15px;
z-index:11;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color: #FFFFFF;
visibility: visible;
display:none;
overflow: hidden;
}
#titleDiv {
position:absolute;
width:0px;
height:15px;
z-index:11;
border-left:1px solid #000000;
border-top:1px solid #000000;
background-color: #FFFFFF;
visibility: visible;
display:none;
overflow: hidden;
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#2c7fac,endColorStr=#ffffff;
}

最后再增加相应的拖放事件即可。

js 代码

//拖放层事件
var iDiffX=0;
var iDiffY=0;
function handleMouseDown(e){
var titleDiv = document.getElementById("titleDiv");
iDiffX = e.clientX-titleDiv.offsetLeft;
iDiffY = e.clientY-titleDiv.offsetTop;
document.body.onmousemove=function(){
var infoDiv = document.getElementById("infoDiv");
var closeDiv = document.getElementById("closeDiv");
var titleDiv = document.getElementById("titleDiv");
infoDiv.style.left = e.clientX-iDiffX;
infoDiv.style.top = e.clientY-iDiffY;
closeDiv.style.left = e.clientX+500-15-iDiffX;
closeDiv.style.top = e.clientY-iDiffY;
titleDiv.style.left = e.clientX-iDiffX;
titleDiv.style.top = e.clientY-iDiffY;
};
document.body.onmouseup=function(){
document.body.onmousemove=null;
document.body.onmouseup=null;
};
}

大家参考下。提提意见。

x.rar (1.5 KB)
下载次数: 33

分享到：

表单验证框架 | CRM中的销售管理

2007-11-05 13:12
浏览 1433
评论(1)
查看更多

1 楼 keke020 2008-09-08

如果打开了对话框,还想操作父窗口里面的字段,
该如何修改呢?

而且想捕捉父窗口里面的事件,对子窗口作相应的更改.......

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模拟网页对话框

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模拟网页对话框

评论

发表评论

相关推荐

最近访客更多访客>>