用div模拟alert对话框,N秒不点击自动关闭(适用IE6、IE7、firefox)

本文介绍如何使用div模拟一个alert对话框,并在指定时间后自动关闭,兼容IE6、IE7和Firefox。提供了两个实现方案,test1.html适用于IE6但不兼容其他浏览器,而test2.html实现了跨浏览器兼容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【转】http://www.javaeye.com/topic/528574

 

工作需要,经理让做个对话提示框,三秒不点击自动关闭,用在web页面上。如果让我用c#写也许毫不费力,于是觉得并没什么困难,然而真做起来。。。
    废话不说,问题如下:根据js运行机制,不可能将一个alert框强行关闭。前几天第一次做,查了好多资料,似乎找到了一个解决方法如test1.html。新建一个iframe,再借助于showModelessDialog来实现一个可关闭的alert。
    于是乎问题似乎解决了,可是今天用的时候才发现,在IE7下,也许是IE7的安全机制的问题,这个方法并不能如愿运行,而且不能兼容firefox。可怜哪,在IE7下甚至都不能执行"javascript:alert()"语句。在网上查了以上午,也没找到有兼容性好的解决方案,于是决定自己重新做个兼容的,一直弄到晚上总算完工了如test2.html。希望对有此需求的人也能有所帮助...如需要,可下载压缩包


    如果发现test2不兼容哪个浏览器的话,
    如果有更好的思路,
    请留言告诉我...



test1.html 经验证,适用于 IE6,不兼容IE7,firefox。

Java代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>   
  3. <head>   
  4. <title></title>   
  5. </head>   
  6. <body>   
  7. <input type="button" value="弹出alert框,一秒后自动关闭;" onClick="JavaScript:myAlert('不点击确定三秒后自动跳转')">   
  8. </body>   
  9.   
  10. <script type="text/javascript">   
  11.     /**  
  12.      *@Description:弹出一个alert对话框,三秒钟内不点击确定,自动关闭alert框,该框最终模拟成非模态形式  
  13.      *              经验证,适用于 IE6,不兼容IE7,firefox  
  14.      *@param:  showstr     alert框里要显示的文本  
  15.     */  
  16.     function myAlert(showstr)   
  17.     {   
  18.         var alertInfo = showstr;  //传递alert框里要显示的信息   
  19.         var timer = 3000;   //设定停留的时间为3000ms,即3秒   
  20.         //在页面中新建一个框架frame,以便在该frame中弹出一个非模态对话框   
  21.         document.body.innerHTML += "<iframe style='display:none;' width='500' name='ifrtemp'></iframe>";   
  22.         //在非模态对话框中弹出一个alert框,并立即关闭该非模态对话框   
  23.         ifrtemp.showModelessDialog("javascript:alert('"+alertInfo+"');window.close();",   
  24.                 "",   
  25.                 "status:no;resizable:no;help:no;dialogHeight:530px;dialogWidth:40px;");   
  26.         setTimeout("ifrtemp.location.reload();",timer); //停留一段时间后强行关闭alert窗口   
  27.     }   
  28. </script>   
  29. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="弹出alert框,一秒后自动关闭;" onClick="JavaScript:myAlert('不点击确定三秒后自动跳转')">
</body>

<script type="text/javascript">
    /**
     *@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 += "<iframe style='display:none;' width='500' name='ifrtemp'></iframe>";
        //在非模态对话框中弹出一个alert框,并立即关闭该非模态对话框
        ifrtemp.showModelessDialog("javascript:alert('"+alertInfo+"');window.close();",
                "",
                "status:no;resizable:no;help:no;dialogHeight:530px;dialogWidth:40px;");
        setTimeout("ifrtemp.location.reload();",timer); //停留一段时间后强行关闭alert窗口
    }
</script>
</html>


test2.html 兼容 IE6 IE7 firefox
所用到几个图片放在压缩包里了

Java代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>   
  3. <head>   
  4. <title>用div模拟alert对话框</title>   
  5. <!-- 为了增加适用性,所有的css样式都写在程序中,调用时只需将selfAlert类引入即可 -->   
  6. </head>   
  7. <body>   
  8.     <br><br><center><h3 style="color:blue">用div模拟alert对话框,一段时间不点击,将自动关闭</h3></center>   
  9. </body>   
  10.   
  11. <script type="text/javascript">   
  12.     var s = new selfAlert("3秒钟不点击将自动关闭",3000);   
  13.   
  14. /**  
  15.  * Descrioption: 模拟alert对话框,一定时间内不点击则自动关闭  
  16.  * param    msgstr: 模拟对话框要显示的字符串  
  17.  *          timer: 自动关闭时间  
  18.  * ps: 适用于 IE6 IE7 firefox  
  19.  */  
  20. function selfAlert(msgstr,timer){   
  21.     //该值可以作为返回值,初始化时为 0 ,点击确定后变为 1 ,点击关闭后变为 2 ,自动关闭 3    
  22.     var alertValue = 0;    
  23.   
  24.     //确定遮罩层的高度,宽度   
  25.     var h = screen.availHeight;   
  26.     var w = screen.availWidth;   
  27.     //创建遮罩层,它的主要作用就是使网页中的其他元素不可用。   
  28.     var dv = document.createElement("div");   
  29.     dv.setAttribute('id','bg');   
  30.     //设置样式   
  31.     dv.style.height = h + "px";   
  32.     dv.style.width = w + "px";   
  33.     dv.style.zIndex = "1111";   
  34.     dv.style.top = 0;   
  35.     dv.style.left = 0;   
  36.        
  37.     //如果不想遮罩,可以去掉这两句   
  38.     dv.style.background = "#fff";   
  39.     dv.style.filter = "alpha(opacity=0)";   
  40.   
  41.     //设为绝对定位很重要   
  42.     dv.style.position = "absolute";   
  43.     //将该元素添加至body中   
  44.     document.body.appendChild(dv);   
  45.   
  46.     //创建提示对话框面板   
  47.     var dvMsg = document.createElement("div");   
  48.     dvMsg.style.position = "absolute";   
  49.     dvMsg.setAttribute('id','msg');   
  50.     dvMsg.style.width = "280px";   
  51.     dvMsg.style.height = "100px";   
  52.     dvMsg.style.top="30%";   
  53.     dvMsg.style.left="40%";   
  54.     dvMsg.style.background = "white";   
  55.     dvMsg.style.zIndex = "1112";   
  56.        
  57.     //可以继续采用如上形式创建模拟对话框表格,这里为了方便采用html形式   
  58.     strHtml =  "<table width='280' height='25' border='0' cellspacing='0' cellpadding='0' align='center'>"  
  59.     strHtml += "    <tr height='25' style='line-height:25px;'>"  
  60.     strHtml += "        <td width='250' title='移动' style='cursor:move;background:#CFD7EC url(title_bg_left.gif) no-repeat top left;' onmousedown='oMove(parentNode.parentNode.parentNode.parentNode);'>"  
  61.     strHtml += "            <font style='font-size:12px;font-weight:bold;color:#000;margin-left:10px;'>消息提示框</font></td>"  
  62.     strHtml += "        <td width='30' style='background:#CFD7EC url(title_bg_right.gif) no-repeat right top;'>"  
  63.     strHtml += "            <img src='close.gif' style='margin-right:3px;cursor:hand;' onclick='imgClose();'><td></tr>"  
  64.     strHtml +=  "</table>"  
  65.     strHtml +=  "<table width='280' height='145' border='0' cellspacing='0' cellpadding='0' align='center' style='border:1px solid #343434'>"  
  66.     strHtml += "    <tr height='113' bgcolor='#F4F4F4'><td width='' style='padding-left:10;'><img src='info.gif'></td>"  
  67.     strHtml += "        <td width='200' align='left'>" + msgstr + "</td></tr>"  
  68.     strHtml += "    <tr height='27'><td colspan='2' style='background:#F4F4F4;padding-top:0px;' valign='top' align='center'>"  
  69.     strHtml += "         <input type='button' value='确&nbsp;定' style='width:70;' onclick='btnclick()'></td></tr>"  
  70.     strHtml += "</table>"  
  71.     dvMsg.innerHTML = strHtml;   
  72.     document.body.appendChild(dvMsg);   
  73.   
  74.     //点击关闭按钮   
  75.     imgClose = function (){   
  76.         alertValue = 2// 2 代表点击了关闭按钮   
  77.         document.body.removeChild(dv);   
  78.         document.body.removeChild(dvMsg);   
  79.     }   
  80.     //点击确定按钮   
  81.     btnclick = function (){   
  82.         alertValue = 1// 1 代表点击了确定按钮   
  83.         document.body.removeChild(dv);   
  84.         document.body.removeChild(dvMsg);   
  85.     }   
  86.        
  87.     remove = function ()   
  88.     {   
  89.         //timer时间过后如果仍未点击,则自动关闭selfAlert框   
  90.         if(alertValue==0){   
  91.             document.body.removeChild(dv);   
  92.             document.body.removeChild(dvMsg);   
  93.         }   
  94.     }   
  95.     //timer秒后自动关闭selfAlert(提示框)   
  96.     setTimeout("remove()",timer);   
  97.        
  98.     //实现鼠标拖动对话框   
  99.     oMove = function(obj) {   
  100.         var otop,oleft;   
  101.         otop = event.y - obj.offsetTop;   
  102.         oleft = event.x - obj.offsetLeft;   
  103.         obj.setCapture();   
  104.   
  105.         obj.onmousemove  = function()   
  106.         {   
  107.             obj.style.left = event.x - oleft;   
  108.             obj.style.top = event.y - otop;   
  109.         }   
  110.         obj.onmouseup  = function()   
  111.         {   
  112.             obj.onmousemove = null;   
  113.             obj.style.filter = null;   
  114.             obj.releaseCapture();   
  115.         }   
  116.     }   
  117. }   
  118. </script>   
  119. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>用div模拟alert对话框</title>
<!-- 为了增加适用性,所有的css样式都写在程序中,调用时只需将selfAlert类引入即可 -->
</head>
<body>
    <br><br><center><h3 style="color:blue">用div模拟alert对话框,一段时间不点击,将自动关闭</h3></center>
</body>

<script type="text/javascript">
    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 =  "<table width='280' height='25' border='0' cellspacing='0' cellpadding='0' align='center'>"
    strHtml += "    <tr height='25' style='line-height:25px;'>"
    strHtml += "        <td width='250' title='移动' style='cursor:move;background:#CFD7EC url(title_bg_left.gif) no-repeat top left;' onmousedown='oMove(parentNode.parentNode.parentNode.parentNode);'>"
    strHtml += "            <font style='font-size:12px;font-weight:bold;color:#000;margin-left:10px;'>消息提示框</font></td>"
    strHtml += "        <td width='30' style='background:#CFD7EC url(title_bg_right.gif) no-repeat right top;'>"
    strHtml += "            <img src='close.gif' style='margin-right:3px;cursor:hand;' onclick='imgClose();'><td></tr>"
    strHtml +=  "</table>"
    strHtml +=  "<table width='280' height='145' border='0' cellspacing='0' cellpadding='0' align='center' style='border:1px solid #343434'>"
    strHtml += "    <tr height='113' bgcolor='#F4F4F4'><td width='' style='padding-left:10;'><img src='info.gif'></td>"
    strHtml += "        <td width='200' align='left'>" + msgstr + "</td></tr>"
    strHtml += "    <tr height='27'><td colspan='2' style='background:#F4F4F4;padding-top:0px;' valign='top' align='center'>"
    strHtml += "         <input type='button' value='确&nbsp;定' style='width:70;' onclick='btnclick()'></td></tr>"
    strHtml += "</table>"
    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();
        }
    }
}
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值