(难)confirm和alert消息框

ak47947 2008-07-31 02:47:59
小弟因项目需要，现在需要更换confirm和alert消息框的样式，但是confirm和alert消息框是js调用的windows的窗口，所以只有用层去模拟，然后网上有很多都是用层来实现的confirm和alert框，但是这种用层来实现的弹出框不带阻塞，（js的alert在执行后会阻止js代码继续往下执行，譬如写三个alert弹出框，他会依次显示并要求确认，而用层实现的弹出框却会一直往下执行，并不会因为弹出了层而停止执行程序），现在公司打算用ext的弹出框，ext的弹出框也是不带阻塞性质的，只能写回调，但我希望得到带阻塞性质的消息框，这样就避免了写回调，不知道大家有没有遇到过这种情况，能不能给个解决方案。。。
...全文
483 26 打赏 收藏 转发到动态 举报
写回复
用AI写文章
26 条回复
切换为时间正序
请发表友善的回复…
发表回复
ak47947 2008-08-05
  • 打赏
  • 举报
 回复
看来这个问题是没什么希望了。。。
adonis_net 2008-08-04
  • 打赏
  • 举报
 回复
mark
nicholsky 2008-08-04
  • 打赏
  • 举报
 回复
大家还是别说兼容，就IE下能实现就不错了，要像alert那样的窗体功能，编个ActiveX的个性化窗体可能可以。
lion98 2008-08-04
  • 打赏
  • 举报
 回复
没有办法做，只能用回调函数，楼主死了这条心吧！！
neo_yoho 2008-08-03
  • 打赏
  • 举报
 回复
要兼容 没什么好办法啊。。。
jhwcd 2008-08-03
  • 打赏
  • 举报
 回复
确实不好做啊。
jhwcd 2008-08-03
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 xingqiliudehuanghun 的回复:]
这种需求应该不会有太好的解决方案，即使勉强找到一个我估计也仅仅使用于某一浏览器
[/Quote]
xingqiliudehuanghun 2008-08-03
  • 打赏
  • 举报
 回复
这种需求应该不会有太好的解决方案，即使勉强找到一个我估计也仅仅使用于某一浏览器
ak47947 2008-08-01
  • 打赏
  • 举报
 回复
然后现在是可以阻塞了，但是弹出的网页还是有标题栏，那颜色样式等于没改
然后又找到了一个解决方案，这个窗口是可以自定义的


<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Chromeless Window</title>
<SCRIPT LANGUAGE="JScript">
/*
This following code are designed and writen by Windy_sk <windy_sk@126.com>
You can use it freely, but u must held all the copyright items!
2003-12-23 modified
Special Thanks For andot
*/

var CW_width = 400;
var CW_height = 300;
var CW_top = 100;
var CW_left = 100;
var CW_url = "/";
var New_CW = window.createPopup();
var CW_Body = New_CW.document.body;
var content = "";
var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'}, onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

function insert_content(){
var temp = "";
CW_Body.style.overflow = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border = "solid black 1px";
temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' ondblclick=\"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" onmouseup='parent.drag_up(event)' onmousemove='parent.drag_move(event)' onmousedown='parent.drag_down(event)' onselectstart='return false' oncontextmenu='return false'>";
temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>";
temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";
temp += "<span id=Help onclick=\"alert('Chromeless Window For IE6 SP1 - Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks For andot')\" style=\""+CSStext+"font-family:System;padding-right:2px;\">?</span>";
temp += "<span id=Min onclick='parent.New_CW.hide();parent.blur()' style=\""+CSStext+"font-family:Webdings;\" title='Minimum'>0</span>";
temp += "<span id=Max onclick=\"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" style=\""+CSStext+"font-family:Webdings;\" title='Maximum'>1</span>";
temp += "<span id=Close onclick='parent.opener=null;parent.close()' style=\""+CSStext+"font-family:System;padding-right:2px;\" title='Close'>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div>";
temp += "这里是网页内容<br>这里是网页内容<br>...";
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
}

insert_content();

var if_max = true;
function show_CW(){
window.moveTo(10000, 10000);
if(if_max){
New_CW.show(CW_top, CW_left, CW_width, CW_height);
if(typeof(New_CW.document.all.include)!="undefined"){
New_CW.document.all.include.style.width = CW_width;
New_CW.document.all.Max.innerText = "1";
}

}else{
New_CW.show(0, 0, screen.width, screen.height);
New_CW.document.all.include.style.width = screen.width;
}
}

window.onfocus = show_CW;
window.onresize = show_CW;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){
New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);
return false;
}
}

function drag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

function drag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;
CW_top = e.screenX-drag_x;
CW_left = e.screenY-drag_y;
}
</SCRIPT>
</HTML>
tantaiyizu 2008-08-01
  • 打赏
  • 举报
 回复
难
zh-wall-e 2008-08-01
  • 打赏
  • 举报
 回复
楼主用在项目中用ext，我对这东西刚接触，也想把它用在有商业目的的项目中。收费吗？好像是不是还要获得什么授权。
ak47947 2008-08-01
  • 打赏
  • 举报
 回复
dailog.htm
<html>
<head>
<script>
var param = window.dialogArguments; //传过来的模式对话框窗口参数
document.title = param.title; //窗口标题,必须在窗口创建前实现s

/********将父窗口的js加载进来********/
var scripts = param.parent.document.scripts;
var _head = document.getElementsByTagName("head")[0];
for(var n = 0; n < scripts.length; n++) {
if(scripts[n].src) {
var _script = newEl("script");
_script.src = scripts[n].src;
bind(_head, _script);
}else{//加载直接在html文档中写的script
var _script = newEl("script");
_script.text = scripts[n].text;
bind(_head, _script);
}
}

/*******根据ID获得父窗口的元素*********/
function $f(el) {
return param.parent.document.getElementById(el);
}

/***********创建一个HTML元素*******/
function newEl(tagName) {
return document.createElement(tagName);
}
/***********追加元素***************/
function bind(ower, child) {
ower.appendChild(child);
}
/*******在浏览器完成对象的装载后立即触发*********/
window.onload = function() {
var winDiv;
if(typeof(param._div) == "string") {
winDiv = param.parent.document.getElementById(param._div); //父窗口window对象,因为param._div对象在父窗口
}else{//直接传对象过来
winDiv = param._div;
}
$("mainDiv").innerHTML = winDiv.innerHTML; //将DIV内容在弹出窗口中渲染
}
</script>
</head>
<body>
<center>
<div id="mainDiv" style="margin-top:20px;width:90%"></div>
</center>
</body>
</html>


test.html
<html>
<head>
<title>测试页面</title>
<style>
.list {
border-top:1 solid #8A2BE2;
border-left:1 solid #8A2BE2;
border-right:1 solid #8A2BE2;
}
.list td {
border-bottom: 1 solid #8A2BE2;
}
</style>
<script>
function $(el) {
return document.getElementById(el);
}
function showWin(param) {
alert("test 前");
window.showModalDialog("dailog.htm", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
alert("test 后");
}

function TB(tbid) {
this.tb = typeof(tbid) == "string"? $(tbid): tbid;
this.getValue = function(rowIndex, cellIndex){
var trs = this.tb.rows[rowIndex];
var _td = trs.cells[cellIndex];
return _td.innerText;
}
this.setValue = function(rowIndex, cellIndex, value) {
var _tr = this.tb.rows[rowIndex];
var _td = _tr.cells[cellIndex];
_td.innerText = value;
}

/********获取行索引********/
this.findRowIndex = function(eventSrc) {
var _tr = eventSrc; //eventSrc事件源,必须在TD里获事件源是TD或TR本身
while(_tr.tagName != "TR") {
_tr = _tr.parentNode;
}
var trs = this.tb.rows;
for(var i = 0; i < trs.length; i++){
if(_tr == trs[i]) return i;
}
}
}

function edit() {
var tb = new TB("data");
rIndex = tb.findRowIndex(event.srcElement);
$("updateRowIndex").value = rIndex;
$("userName").value = tb.getValue(rIndex, 1); //获得姓名
$("sex").value = tb.getValue(rIndex, 2); //获得性别
$("age").value = tb.getValue(rIndex, 3); //获得年龄
showWin({title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
}

function saveAndUpdateView(){
var updateRowIndex = $("updateRowIndex").value;
var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父窗口中的table
tb.setValue(updateRowIndex, 1, $("userName").value);
tb.setValue(updateRowIndex, 2, $("sex").value);
tb.setValue(updateRowIndex, 3, $("age").value);
close();
}
</script>

</head>
<body>
<p style="margin-top:60px">
<center>
<table id="data" class="list" width="460px">
<tr>
<td>编号</td>
<td>用户名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>李永胜</td>
<td>男</td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>2</td>
<td>林兄</td>
<td>男</td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>3</td>
<td>叶兄</td>
<td>男</td>
<td>23</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
</table>
</center>
</p>

<!---弹出窗口显示的内容---->
<div id="openWin" style="display:none;">
<form>
<fieldSet>
<legend>修改用户</legend>
<table>
<tr>
<td>用户名</td><td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>性别</td><td><input type="text" id="sex"/></td>
</tr>
<tr>
<td>年龄</td><td><input type="text" id="age"/></td>
</tr>
</table>
</fieldSet>
<input type="hidden" id="updateRowIndex"/>
</form>
<span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();"> 修改 </span>
</div>
</body>
</html>
ak47947 2008-08-01
  • 打赏
  • 举报
 回复
我们公司现在用的就是ext的，然后在里面写回调，但是我们公司有100多个模块，页面更是不计其数，接下来一个多月就是我们的工作重点。。。。郁闷！如果可以带阻塞，那么就不用改写什么代码，直接重写alert就好，研究了下，我也分享下我的东西
herowach 2008-08-01
  • 打赏
  • 举报
 回复
好象是不能阻塞的,刚看了个帖子,有方便回调的方法,还不错
http://bbs.51js.com/redirect.php?tid=72325&goto=lastpost
herowach 2008-08-01
  • 打赏
  • 举报
 回复
有点意思,关注中```
这问题也想过,不过没遇到这种情况...
如果真不能阻塞就只能写成回调函数了,不知道加个无限期的定时期,会不会阻塞,未验证,只是猜想...
xingqiliudehuanghun 2008-08-01
  • 打赏
  • 举报
 回复
确实很难实现
ak47947 2008-08-01
  • 打赏
  • 举报
 回复
我的阻塞是譬如我写alert("1")；alert("2")；alert("3")；
那么将会在弹出1，之后要求我点确认，然后再运行到2，然后确认，再弹出3，
而不带阻塞的会显示3，2，1 一起显示出来，就是执行完alert("1")；后没确定前也会继续执行
阿云ivan 2008-08-01
  • 打赏
  • 举报
 回复
FF是不支持showModalDialog的

楼主想如何阻塞？可否贴个样例？
familyX 2008-08-01
  • 打赏
  • 举报
 回复
js
的阻塞还真没遇到过。
不过1楼的好像可以的。
ak47947 2008-08-01
  • 打赏
  • 举报
 回复
这个可以带阻塞事件吗？
加载更多回复（6）
alert和confirm弹出框样式美化.zip
alert和confirm弹出框样式美化，可自定义颜色和样式，无须调用浏览器自带弹框。
alert confirm
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。 window.alert("欢迎！请按“确定”继续。");
好看好用的alert提示框
组件名称：ymPrompt消息提示组件 2.0 =============================================================================== 组件说明：在web开发中，对于浏览器默认的消息提示框（如alert,confirm等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 =============================================================================== 组件功能介绍： 1、调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。 2、兼容IE6.0+、FF1.5+、Opear9+（在Opear下显示有一个小缺陷），兼容HTML4/XHTML1.0页面渲染模式。 3、完全的CSS皮肤定制功能，所有外观包括显示图标/关闭按钮等都可以通过css设置。目前提供了五种皮肤，Vista、QQ、dmm-green、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并关闭后该select仍保持隐藏状态，而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作（包括F5），“消息确认框”支持“tab键/左右方向键”切换确定/取消焦点。 8、可以页面加载的任意时间调用，如页面初始化时调用，页面加载完成后调用。 9、支持通过JSON和传统的参数传入方式。如ymprompt.alert('消息内容',300,200,'消息标题',handler)和ymprompt.alert({message:'消息内容',width:300,height:200,title:'消息标题',handler:handler})，这两种写法是等价的。 10、只需要一个回调函数，可捕获确定、取消及关键按钮的点击事件。函数改变了1.0版需要对确定和取消按钮分别写回调函数及不支持关闭事件的缺陷， 11、完全的封装，对外只暴露一个ymPrompt变量，有效防止与使用者程序变量的冲突。 12、程序(js)与样式(css)的完全分离，取消了1.0中自动加载css的功能，用户可根据需要加载对应css样式表单，降低了对样式配置的复杂度。
JQuery Alert、confirm、prompt提示框插件
内容索引:脚本资源,jQuery,提示框,jQuery插件,Confirm　　jQuery Alert Dialogs，又一个基于jQuery的提示框插件，主要包括Alert、Confirm、prompt这三种，还有一个高级范例，可以在提示框内嵌入HTML语言，可以自定义风格样式。jQuery的提示框插件有很多种，每一款都是出自不同的高人之手，因此都比较有自己的特点，包括风格和使用方法等。
弹出消息框
这是对于alert和confirm的弹出框的封装和美化，可以进行下载
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章