当程序进程在服务端继续运行之前，谁没有使用过window.confirm()方法显示一个确认对话框给用户呢？而我在初次使用它的时候就确信我爱上了它。可是，有两件另人讨厌的事促使我来创建自己定制的对话框：
1.按纽的焦点问题 confirm()方法选择默认的按纽是“OK”。假设你有一个grid控件和分布在控件中每行的按纽。当用户点击此按纽激发删除行事件时，你喜欢显示一个确认对话框。在进行那样的操作中显示对话框是一个很好的习惯。然而，如果用户由于失误敲了回车键，那么“OK”按纽单击事件就被执行了。
2.默认的“OK”和“Cancel”两个按纽不能修改（样式、文件的修改之类的）。
下面说一下使用自定制对话框的几点好处：
1.需要将默认项设置给“OK”按纽之外的按纽。
2.需要改变默认按纽的文本（如我喜欢用"Yes"和"No"）、修改按纽的样式。
我应该提醒的最后一件事就是一旦窗口大小改变，对话框要具有重置自己位置的能力。这样的话将始终会显示在窗口中央。
程序步骤
[ 返回页首 ]
让我们来检验一下这个创建自定制对话框的程序。 HTML代码 这个对话框由以下几个控件组成。
1.三个div层
2.两个Web服务器控件(按纽)
代码清单1
<div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
<div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
</div>
<div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
</div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
<asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>
</div>
</div>
以上清单将创建一个为我们的对话框服务的层。这个层默认隐藏，主要包含两个层：一个用来显示提示信息给用户，另一个包括两个按纽。
需要注意的事，在每个层的样式属性中，我们要设置给Z-INDEX属性一个值（比页面中其它控件的Z-INDEX属性更高），使得这个对话框的所有层在页面中都居于其它控件之上。
JavaScript 代码
在这部分我们将创建一个包含4个全局变量和5个函数的JavaScript文件。
1.全局变量（4个）
a-var divWidth='';这个变量用来设置对话框的宽度。
b-var divHeight='';这个变量用来设置对话框的高度。
c-var txtFirstButton=OK;这个变量用来设置第一个按纽的文本值。
d-var txtSecondButton=Cancel;这个变量用来设置第二个按纽的文本值。
2.函数（5个）
a-DisplayConfirmMessage(msg,width,height)
b-SetTopLeft(divLayer)
c-SetText(txtButton1,txtButton2)
d-SetHeightWidth(divLayer)
f-SetDefaultButton(defaultButton)
代码清单2
以上函数带3个参数.第一个是你要显示给用户的信息，第二个用来指定对话框的宽度，最后一个用来指定对话框的高度。如果最后两个参数没有提供值，那么函数中将设置其默认值。
对层设置完高度、宽度、居上和居右属性后，我们将通过设置display为'block',使它显示出来。
注意window.onresize的使用，它将调用 SetTopLeft和SetHeightWidth函数来控制可见层重置其位置。
代码最后一行常用来设置开发者发送给用户的信息。
代码清单3
function SetTopLeft(divLayer)
{
// Get the dialogbox height
var divHeightPer = divLayer.style.height.split('px')[0];
// Set the top variable
var top = (parseInt(document.body.offsetHeight) / 2) - (divHeightPer / 2)
// Get the dialog box width
var divWidthPix = divLayer.style.width.split('px')[0];
// Get the left variable
var left = (parseInt(document.body.offsetWidth) / 2) - (parseInt(divWidthPix)
/ 2);
// set the dialogbox position to abosulute
divLayer.style.position = 'absolute';
// Set the div top to the height
divLayer.style.top = top
// Set the div Left to the height
divLayer.style.left = left;
}
以上函数作用是设置对话框的位置。经过计算后，我们获得div层应该显示的居上和居左的位置，并设置对话框的相应属性。首先，我们获得层的高度（只是数值，不包括px）,然后我们用2除以窗口的高度和宽度为了使对话框居中，最后设置层的绝对位置。
代码清单4
function SetHeightWidth(divLayer)
{
// Set the dialogbox width
divLayer.style.width = divWidth + 'px';
// Set the dialogbox Height
divLayer.style.height = divHeight + 'px'
}
以上清单是设置对话框的宽度和高度。无论窗口大小改变，还是使用DisplayconfirmMessage方法时将被调用。注意此函数带的参数是一个层对象。
代码清单5
function SetText(txtButton1, txtButton2)
{
// Set display text for the two buttons
if (txtButton1 == null)
document.getElementById('btnConfOK').innerText = txtFirstButton;
else
document.getElementById('btnConfOK').innerText = txtButton1;// Set display text for the two buttons
if (txtButton2 == null)
document.getElementById('btnConfCancel').innerText = txtSecondButton;
else
document.getElementById('btnConfCancel').innerText = txtButton2;
}
以上清单用来显示两个按纽的文本。这将提供给你改变和自定制按纽文本（根据你的实际需要）的能力，此函数有两个字符串参数。
代码清单6
function SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
以上函数设置对话框的默认焦点。用这个函数可随心所欲定制对话框。
执行步骤
[ 返回页首 ]
function DisplayConfirmMessage(msg, width, height)
{
// Set default dialogbox width if null
if (width == null)
divWidth = 180
else
divWidth = width;
// Set default dialogBox height if null
if (height == null)
divHeight = 90
else
divHeight = height;
// Ge the dialogbox object
var divLayer = document.getElementById('divConfMessage');
// Set dialogbox height and width
SetHeightWidth(divLayer)
// Set dialogbox top and left
SetTopLeft(divLayer);
// Show the div layer
divLayer.style.display = 'block';
// Change the location and reset the width and height if window is resized
window.onresize = function()
{
if (divLayer.style.display == 'block')
{
SetTopLeft(divLayer);
SetHeightWidth(divLayer)
}
}
// Set the dialogbox display message
document.getElementById
('confirmText').innerText = msg;
}
在这部分中你将学到如何将这个对话框添加到你的项目中运行。打开一个webform，转到设计模式，把HTML代码粘贴在<form>标签之间.
在根文件夹下创建一个名为CustomDialog.js的javascript文件，粘贴以上所有函数，然后将以下代码加至<head>之间。
代码清单7
<script language="javascript" src="CustomDialog.js"></script>
以上代码将链接到你已经创建到webform项目中的js文件,下一步即添加javascript代码给一个按纽的单击事件，例如：
代码清单8
<script language = JavaScript>
function ShowMessage()
{
SetText('Yes', 'No');
DisplayConfirmMessage('are you sure', 180, 90)
SetDefaultButton('btnConfOK');
return false;
}
</script>
首先要做的是设置按纽的文本（我已经设置为yes和no）,其次是设置确认信息（如我写的是are you sure）,最后就是设置焦点按纽(我选的是yes),点击后返回false.
代码清单9
Button1.Attributes.Add("onclick","return ShowMessage()");
以上图片显示当窗口大小改变时，对话框重置其
附件 -
如何获取无忧币 -
下载扣无忧币规则1.bmp (70.93 KB)
2010-9-8 08:32
1
2.bmp (19.61 KB)
2010-9-8 08:32
2
TOP
社区任务五步走 赢取时尚上网本ribut9225优秀技术经理
帖子
6030
精华
2积分
5569
无忧币
8302
注册时间
2006-6-22
最后登录
2011-7-28
·
发短消息·
家园好友· 当前离线
·
个人博客板凳大中小发表于 2010-9-8 08:33
只看该作者弱电安防培训--工信部认证 |
9月51CTO午饭浙江聚会报名啦！ |
开启运算新时代 寻找“智慧运算”火种 |
51CTO-T恤DIY，午饭说了算！复制内容到剪贴板
代码:
网页模式对话框
基本介绍：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明：
sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。
参数传递：
1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px";
modal.htm
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px";
alert(str);
modal.htm
window.returnValue="/";
