工作需要,经理让做个对话提示框,三秒不点击自动关闭,用在web页面上。如果让我用c#写也许毫不费力,于是觉得并没什么困难,然而真做起来。。。
废话不说,问题如下:根据js运行机制,不可能将一个alert框强行关闭。前几天第一次做,查了好多资料,似乎找到了一个解决方法如test1.html。新建一个iframe,再借助于showModelessDialog来实现一个可关闭的alert。
于是乎问题似乎解决了,可是今天用的时候才发现,在IE7下,也许是IE7的安全机制的问题,这个方法并不能如愿运行,而且不能兼容firefox。可怜哪,在IE7下甚至都不能执行"javascript:alert()"语句。在网上查了以上午,也没找到有兼容性好的解决方案,于是决定自己重新做个兼容的,一直弄到晚上总算完工了如test2.html。希望对有此需求的人也能有所帮助...如需要,可下载压缩包
[color=red]
如果发现test2不兼容哪个浏览器的话,
如果有更好的思路,
请留言告诉我...
[/color]
test1.html 经验证,适用于 IE6,不兼容IE7,firefox。
/**
*@Description:弹出一个alert对话框,三秒钟内不点击确定,自动关闭alert框,该框最终模拟成非模态形式
* 经验证,适用于 IE6,不兼容IE7,firefox
*@param: showstr alert框里要显示的文本
*/
function myAlert(showstr)
{
var alertInfo = showstr; //传递alert框里要显示的信息
var timer = 3000; //设定停留的时间为3000ms,即3秒
//在页面中新建一个框架frame,以便在该frame中弹出一个非模态对话框
document.body.innerHTML += "";
//在非模态对话框中弹出一个alert框,并立即关闭该非模态对话框
ifrtemp.showModelessDialog("javascript:alert('"+alertInfo+"');window.close();",
"",
"status:no;resizable:no;help:no;dialogHeight:530px;dialogWidth:40px;");
setTimeout("ifrtemp.location.reload();",timer); //停留一段时间后强行关闭alert窗口
}
test2.html 兼容 IE6 IE7 firefox
所用到几个图片放在压缩包里了
用div模拟alert对话框用div模拟alert对话框,一段时间不点击,将自动关闭
var s = new selfAlert("3秒钟不点击将自动关闭",3000);
/**
* Descrioption: 模拟alert对话框,一定时间内不点击则自动关闭
* param msgstr: 模拟对话框要显示的字符串
* timer: 自动关闭时间
* ps: 适用于 IE6 IE7 firefox
*/
function selfAlert(msgstr,timer){
//该值可以作为返回值,初始化时为 0 ,点击确定后变为 1 ,点击关闭后变为 2 ,自动关闭 3
var alertValue = 0;
//确定遮罩层的高度,宽度
var h = screen.availHeight;
var w = screen.availWidth;
//创建遮罩层,它的主要作用就是使网页中的其他元素不可用。
var dv = document.createElement("div");
dv.setAttribute('id','bg');
//设置样式
dv.style.height = h + "px";
dv.style.width = w + "px";
dv.style.zIndex = "1111";
dv.style.top = 0;
dv.style.left = 0;
//如果不想遮罩,可以去掉这两句
dv.style.background = "#fff";
dv.style.filter = "alpha(opacity=0)";
//设为绝对定位很重要
dv.style.position = "absolute";
//将该元素添加至body中
document.body.appendChild(dv);
//创建提示对话框面板
var dvMsg = document.createElement("div");
dvMsg.style.position = "absolute";
dvMsg.setAttribute('id','msg');
dvMsg.style.width = "280px";
dvMsg.style.height = "100px";
dvMsg.style.top="30%";
dvMsg.style.left="40%";
dvMsg.style.background = "white";
dvMsg.style.zIndex = "1112";
//可以继续采用如上形式创建模拟对话框表格,这里为了方便采用html形式
strHtml = "
strHtml += "
"strHtml += "
"strHtml += " 消息提示框
"strHtml += "
" strHtml += "
strHtml += "
"strHtml += "
strHtml += "
![info.gif](info.gif)
strHtml += "
" + msgstr + ""strHtml += "
"strHtml += "
"strHtml += "
"dvMsg.innerHTML = strHtml;
document.body.appendChild(dvMsg);
//点击关闭按钮
imgClose = function (){
alertValue = 2; // 2 代表点击了关闭按钮
document.body.removeChild(dv);
document.body.removeChild(dvMsg);
}
//点击确定按钮
btnclick = function (){
alertValue = 1; // 1 代表点击了确定按钮
document.body.removeChild(dv);
document.body.removeChild(dvMsg);
}
remove = function ()
{
//timer时间过后如果仍未点击,则自动关闭selfAlert框
if(alertValue==0){
document.body.removeChild(dv);
document.body.removeChild(dvMsg);
}
}
//timer秒后自动关闭selfAlert(提示框)
setTimeout("remove()",timer);
//实现鼠标拖动对话框
oMove = function(obj) {
var otop,oleft;
otop = event.y - obj.offsetTop;
oleft = event.x - obj.offsetLeft;
obj.setCapture();
obj.onmousemove = function()
{
obj.style.left = event.x - oleft;
obj.style.top = event.y - otop;
}
obj.onmouseup = function()
{
obj.onmousemove = null;
obj.style.filter = null;
obj.releaseCapture();
}
}
}