`
bhj626
  • 浏览: 21998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

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


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



test1.html 经验证,适用于 IE6,不兼容IE7,firefox。
<!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
所用到几个图片放在压缩包里了
<!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>
分享到:
评论
33 楼 nighthawk 2010-06-13  
想问下楼主,那个框怎么我点了他也关闭,怎么样操作他就不关闭?
32 楼 warrior701 2010-06-13  
学习学习。。。
31 楼 Hooopo 2009-12-05  
whaosoft 写道
要是能出个 适用于各种浏览器的就好了~!~

http://www.iteye.com/topic/541121这个各种浏览器都可以
30 楼 happysoul 2009-12-04  
本地测试的时候 window.open 弹出几乎不会被IE6屏蔽,那个showModelessDialog经常会被作为弹出窗口过滤掉,尽量不用的好
29 楼 abushuia 2009-12-04  
jquery 好像一个方法就可以搞定的。
28 楼 bhj626 2009-12-03  
Kaza 写道
提两个小问题
1.用div遮罩,只能保证鼠标点不到,但是用tab是可以切换焦点的,这样就可以用键盘“点”到遮罩下的链接
2.alert()是中断JS进程的,应该加个回调在这里吧?

第一个问题确实存在,没考虑到,
要是中断了js进程,还怎么让他计时并自动关闭啊,这个倒是实现不了啊,
27 楼 Ihavegotyou 2009-12-03  
我的blog有这个。
那个dialog.js就是(只是界面没有显示"还有xxx秒就要关闭"),部分代码是jquery的
http://ihavegotyou.iteye.com/blog/477120
26 楼 Kaza 2009-12-03  
提两个小问题
1.用div遮罩,只能保证鼠标点不到,但是用tab是可以切换焦点的,这样就可以用键盘“点”到遮罩下的链接
2.alert()是中断JS进程的,应该加个回调在这里吧?
25 楼 bhj626 2009-12-03  
sangli 写道

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>添加记录成功</title>
<script type="text/javascript">
function closewindow(){
	if(window.opener){
		window.opener.location.reload(true);
		window.close();
	}
}
function clock(){
	i = i -1;
	if(document.getElementById("info")){
		document.getElementById("info").innerHTML = "本窗口将在"+i+"秒后自动关闭";
	}
	if(i > 0)
		setTimeout("clock();",1000);
	else
		closewindow();
}

var i = 4;
clock();

</script>
</head>
<body>
<center>
	添加记录成功!<p>
	<div id="info">本窗口将在3秒后自动关闭</div>
	<input type="button" value="关闭窗口" onclick="closewindow();">
</center>
</body>
</html>


试了下,你的这个确实可以用,做论坛时候估计还凑合。不过我要的是个仿alert自动关闭(记住是alert),我们做的东西,所有的提示都是alert,不可能拿一个页面提示别人吧,风格太怪了。当然了,不排除有些领域的产品可以用页面提示的。
24 楼 vb2005xu 2009-12-03  
闲着我也来写个,不就是个模态框么?至于这么复杂么?
23 楼 sangli 2009-12-03  
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>添加记录成功</title>
<script type="text/javascript">
function closewindow(){
if(window.opener){
window.opener.location.reload(true);
window.close();
}
}
function clock(){
i = i -1;
if(document.getElementById("info")){
document.getElementById("info").innerHTML = "本窗口将在"+i+"秒后自动关闭";
}
if(i > 0)
setTimeout("clock();",1000);
else
closewindow();
}

var i = 4;
clock();

</script>
</head>
<body>
<center>
添加记录成功!<p>
<div id="info">本窗口将在3秒后自动关闭</div>
<input type="button" value="关闭窗口" onclick="closewindow();">
</center>
</body>
</html>
22 楼 caihuiji 2009-12-01  
我最近也在做界面的东西,对那些不同浏览器的兼容问题实在无语。
一个简单的东西,为了适应其他的东西,把他给复杂化了。
21 楼 a3mao 2009-12-01  
thickbox2.0  为什么不使用这个呢?
20 楼 bhj626 2009-11-30  
[quote=&quot;hekeji&quot;]ifrtemp.showModelessDialog 这个在FF 浏览器中可以运行吗?我记得FF中根本就不支持这个.

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

不是标注了么

19 楼 hekeji 2009-11-30  
ifrtemp.showModelessDialog 这个在FF 浏览器中可以运行吗?我记得FF中根本就不支持这个.
18 楼 release 2009-11-30  
CHROME 兼容通过
17 楼 sunjun 2009-11-30  
bhj626 写道
sunjun 写道
http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html

呵呵,你没懂我意思,我是想实现alert N秒自动跳转,不是为了好看重写alert



这个都可以实现的,
16 楼 bhj626 2009-11-30  
fancyboy2050 写道
创建一个新的DIV alert出来,然后过几秒后把它隐藏了就可以吧。

恩,基本就是哪个样子,不过隐藏的不好,要把那个控件移除了才好
15 楼 fancyboy2050 2009-11-30  
创建一个新的DIV alert出来,然后过几秒后把它隐藏了就可以吧。
14 楼 bhj626 2009-11-30  
少女杀手 写道
还不错,提点建议,个人觉得当鼠标拖动时不计算时间的好,因为正拖动着,对话框突然就消失了!

恩,这个需求不一样,其实移动不移动没什么,别人一般都是看alert的信息的,移动没有什么用啊,添加移动主要为了迎合用户的习惯

相关推荐

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    因此简单用div写了一个alert提示框,并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); ...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    js弹出div层模拟alert(可以在iframe中使用)

    本教程将详细介绍如何使用JavaScript创建一个自定义的div层来模拟alert对话框,并解决在iframe中使用的兼容性问题。 首先,我们需要创建一个HTML结构来模拟alert对话框。这个结构通常包含一个可关闭的按钮和用户...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...

    Div模拟对话框 .

    在网页设计中,"Div模拟对话框"是一种常见的技术,用于在不离开当前页面的情况下向用户展示信息或交互。这种技术通常使用HTML、CSS和JavaScript实现,替代了传统的JavaScript弹窗或者浏览器内置的对话框,提供了更为...

    纯js(javascript)弹出层 对话框,div 模拟系统对话框

    本篇文章将详细讲解如何使用纯JavaScript(无依赖库如jQuery等)来创建自定义的弹出层对话框,以及如何模拟系统级别的Alert、Confirm和Prompt对话框。 首先,我们来理解“弹出层”。弹出层,通常是一个浮现在页面...

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`&lt;li&gt;`元素间距兼容性问题 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...

    纯CSS实现div弹出对话框

    纯CSS实现div弹出对话框 可以应用于C#,.net 里面。 页面比较好看。

    div+css 完全兼容 样式兼容性 ie6 ie7 IE8 IE9 和firefox方法

    在网页设计领域,`div+css`布局是现代网页制作的标准技术之一,它将内容(HTML元素)与表现(CSS...阅读提供的资料如"十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf",将更深入地了解这些方法和技巧。

    js实现div模拟模态对话框展现URL内容.pdf

    js实现div模拟模态对话框展现URL内容

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.docx

    让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器 在前端开发中,让 Div+CSS 兼容不同的浏览器是一个很大的挑战。不同的浏览器有不同的渲染引擎和CSS解析规则,导致了同一份CSS代码在不同的浏览器中...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    CSS hack 针对IE6,IE7,firefox显示不同效果

    针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求,特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器,并提供一些实用的技巧和方法。 首先,我们需要了解IE6、IE7...

    css解决IE6,IE7,firefox兼容性问题.

    ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    2. **居中对齐**:Firefox中,设置`div`的`margin-left`和`margin-right`为`auto`即可实现居中,但IE6和IE7需要通过设置`body`的`text-align`为`center`,然后让`div`的`margin`自动调整。 3. **高度和宽度的适应**...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf

    然而,不同的浏览器对CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(如IE6、IE7、IE8)与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

    firefox与ie css+div兼容大全

    3. **填充(Padding)与尺寸**:Firefox会在设置`padding`后自动调整`div`的`height`和`width`,而IE则不会。为解决这个问题,可以使用`!important`强制为Firefox设置`height`和`width`。 4. **`!important`规则**...

    模拟163弹出对话框(兼容IE firefox)

    用div模拟163对话框,可拖拉,可以根据自己的需求更改源码 大家打开的如果发生脚本错误,出现空白页,没关系那是因为乱码,请加上 ;charset=UTF-8" /&gt;

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.docx

    以下是一些解决`div+css`在IE6、IE7、IE8、IE9以及Firefox、Chrome等浏览器兼容性问题的方法: 1. **DOCTYPE声明**:确保在HTML文档开头使用正确的DOCTYPE声明,如`&lt;!DOCTYPE html&gt;`,这有助于使浏览器以标准模式...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.docx

    然而,不同的浏览器对于CSS的支持程度和解析方式存在差异,特别是老版本的Internet Explorer(IE6、IE7、IE8)与Firefox等其他浏览器之间。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度不...

Global site tag (gtag.js) - Google Analytics