关于用DIV模拟Confirm确认窗口的问题
三木哥 2008-08-03 03:11:47 我用DIV做了一个确认窗口,用来替代Confirm,DIV有"确认"和"取消"两个按钮,
现在我想点击“确认”按钮的时候,使整个DIV窗口返回true, 也就是说要达到Confirm窗口的那种效果。
我把代码帖出来吧:
以下是Common.js文件的内容:
首先定义了两个DIV
document.write(" <div id='divMessageBoxBody' class='MessageBoxBody'> </div>");
document.write(" <div id='divMessageBoxBG' class='MessageBoxBG'> </div>");
//这是ConfirmBox函数的详细代码
function ConfirmBox(message)
{
var msgBox = document.getElementById("divMessageBoxBody");
var background = document.getElementById("divMessageBoxBG");
msgBox.style.display="block";
background.style.display="block";
var str="";
str+=" <table> <tr> <td class='ConfirmBoxIcon'> </td> <td>";
str+=" <table> <tr style=\"height:70px;\"> <td>"+message+" </td> </tr>";
str+=" <tr style='height:20px;'> <td style='text-align:right;'>";
str+=" <input type='button' id="ButtonYes" value='Yes' onclick='Hide();'/> ";
str+=" <input type='button' id="ButtonNo" value='No' onclick='Hide();'/>";
str+=" </td> </tr> </table> </td> </tr> </table>";
msgBox.innerHTML=str;
}
//隐藏DIV
function Hide()
{
document.getElementById("divMessageBoxBody").style.display="none";
document.getElementById("divMessageBoxBG").style.display="none";
}
以下是DIV的样式:
/*弹出窗口的背景样式*/
.MessageBoxBG
{
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
z-index:1001;
-moz-opacity: 0.80;
opacity:.80;
filter: alpha(opacity=80);
}
/*弹出窗口的样式*/
.MessageBoxBody
{
display: none;
position: absolute;
background-color:#FFF;
border:solid 1px #B6BCCC;
font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align:center;
top:50%;
left:50%;
height:135px;
width:300px;
margin:-60px 0 0 -150px;
padding: 0px;
z-index:1002;
overflow: auto;
}
现在最关键的就是点击ButtonYes时如何使整个DIV窗体返回true.
因为我在页面中是这样调用该函数的:
if(ConfirmBox('是否确认删除?'))
{
return true;
}
else
{
return false;
}
使用方法跟Confirm是一样的.