工作需要，经理让做个对话提示框，三秒不点击自动关闭，用在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='确 定' 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>
分享到：
- 2009-11-26 21:36
- 浏览 11383
- 评论(33)
- 论坛回复 / 浏览 (32 / 23365)
- 查看更多
相关推荐
因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框样式*/ .show_alert_box{ width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:rgba(0,0,0,0.6); ...
尤其是在处理旧版Internet Explorer（如IE6、IE7、IE8）与现代浏览器（如Firefox、Chrome等）之间的样式差异时，CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例，帮助...
本教程将详细介绍如何使用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 Hack，即...
在网页设计中，"Div模拟对话框"是一种常见的技术，用于在不离开当前页面的情况下向用户展示信息或交互。这种技术通常使用HTML、CSS和JavaScript实现，替代了传统的JavaScript弹窗或者浏览器内置的对话框，提供了更为...
本篇文章将详细讲解如何使用纯JavaScript（无依赖库如jQuery等）来创建自定义的弹出层对话框，以及如何模拟系统级别的Alert、Confirm和Prompt对话框。 首先，我们来理解“弹出层”。弹出层，通常是一个浮现在页面...
### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容性问题 #### 背景介绍 在Web开发过程中，我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
在网页设计领域，`div+css`布局是现代网页制作的标准技术之一，它将内容（HTML元素）与表现（CSS...阅读提供的资料如"十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf"，将更深入地了解这些方法和技巧。
js实现div模拟模态对话框展现URL内容
让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器 在前端开发中，让 Div+CSS 兼容不同的浏览器是一个很大的挑战。不同的浏览器有不同的渲染引擎和CSS解析规则，导致了同一份CSS代码在不同的浏览器中...
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...
针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求，特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器，并提供一些实用的技巧和方法。 首先，我们需要了解IE6、IE7...
### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展，浏览器种类日益增多，其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期，IE6、IE7 和 ...
2. **居中对齐**：Firefox中，设置`div`的`margin-left`和`margin-right`为`auto`即可实现居中，但IE6和IE7需要通过设置`body`的`text-align`为`center`，然后让`div`的`margin`自动调整。 3. **高度和宽度的适应**...
然而，不同的浏览器对CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（如IE6、IE7、IE8）与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...
3. **填充（Padding）与尺寸**：Firefox会在设置`padding`后自动调整`div`的`height`和`width`，而IE则不会。为解决这个问题，可以使用`!important`强制为Firefox设置`height`和`width`。 4. **`!important`规则**...
用div模拟163对话框，可拖拉，可以根据自己的需求更改源码 大家打开的如果发生脚本错误，出现空白页，没关系那是因为乱码，请加上 ;charset=UTF-8" />
以下是一些解决`div+css`在IE6、IE7、IE8、IE9以及Firefox、Chrome等浏览器兼容性问题的方法： 1. **DOCTYPE声明**：确保在HTML文档开头使用正确的DOCTYPE声明，如`<!DOCTYPE html>`，这有助于使浏览器以标准模式...
然而，不同的浏览器对于CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（IE6、IE7、IE8）与Firefox等其他浏览器之间。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度不...