ie7 html自定义alert,用div模拟alert对话框，N秒不点击自动关闭（适用IE6、IE7、firefox）...

工作需要，经理让做个对话提示框，三秒不点击自动关闭，用在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 += "

"

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();

}

}

}