Javascript有许多内建的Ҏ来生对话框Q如Qwindow.alert(), window.confirm(),window.prompt().{?nbsp;然而IE提供更多的方法支持对话框。如Q?nbsp;
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()Ҏ用来创徏一个显CHTML内容的模态对话框Q由于是对话框，因此它ƈ没有一般用window.open()打开的窗口的所有属性?nbsp;
window.showModelessDialog()Ҏ用来创徏一个显CHTML内容的非模态对话框?nbsp;
当我们用showModelessDialog()打开H口Ӟ不必用window.close()d闭它Q当以非模态方式EIE5Q打开Ӟ 打开对话框的H口仍可以进行其他的操作Q即对话框不L最上面的焦点，当打开它的H口QＲQ改变时Q它自动关闭。而模态EQIQ］方式的对话框始终有焦点（焦点不可U走Q直到它关闭Q。模态对话框和打开它的H口相联p，因此我们打开另外的窗口时Q他们的链接关系依然保存Qƈ且隐藏在zdH口的下面?nbsp;
使用Ҏ如下Q?nbsp;
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明Q?nbsp;
sURL
必选参敎ͼcdQ字W串。用来指定对话框要显C的文档的URL?nbsp;
vArguments
可选参敎ͼcdQ变体。用来向对话框传递参数。传递的参数cd不限Q包括数l等。对话框通过window.dialogArguments来取得传递进来的参数?nbsp;
sFeatures
可选参敎ͼcdQ字W串。用来描q对话框的外观等信息Q可以用以下的一个或几个Q用分号“;”隔开?nbsp;
dialogHeight 对话框高度，不小于１Q０pxQﾃQ４中dialogHeight ?nbsp;dialogWidth 默认的单位是emQ而ﾃQ５中是pxQؓ方便其见Q在定义modal方式的对话框Ӟ用px做单位?nbsp;
dialogWidth: 对话框宽度?nbsp;
dialogLeft: 距离桌面左的距离?nbsp;
dialogTop: L面上的距R?nbsp;
center: {yes | no | 1 | 0 }Q窗口是否居中，默认yesQ但仍可以指定高度和宽度?nbsp;
help: {yes | no | 1 | 0 }Q是否显C帮助按钮，默认yes?nbsp;
resizable: {yes | no | 1 | 0 } QﾃQ５Q］Q是否可被改变大。默认no?nbsp;
status: {yes | no | 1 | 0 } QIE5+Q：是否昄状态栏。默认ؓyes[ Modeless]或no[Modal]?nbsp;
scroll:{ yes | no | 1 | 0 | on | off }Q指明对话框是否昄滚动条。默认ؓyes?nbsp;
q有几个属性是用在HTA中的Q在一般的|页中一般不使用?nbsp;
dialogHide:{ yes | no | 1 | 0 | on | off }Q在打印或者打印预览时对话框是否隐藏。默认ؓno?nbsp;
edge:{ sunken | raised }Q指明对话框的边框样式。默认ؓraised?nbsp;
unadorned:{ yes | no | 1 | 0 | on | off }Q默认ؓno?nbsp;
传入参数Q?nbsp;
要想对话框传递参敎ͼ是通过vArguments来进行传递的。类型不限制Q对于字W串cdQ最大ؓ4096个字W。也可以传递对象，例如Q?nbsp;
test1.htm
====================
<script>
var mxh1 = new Array("mxh","net_lover","孟子E?)
var mxh2 = window.open("about:blank","window_mxh")
// 向对话框传递数l?nbsp;
window.showModalDialog("test2.htm",mxh1)
// 向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
====================
<script>
var a = window.dialogArguments
alert("您传递的参数为：" + a)
</script>
test3.htm
====================
<script>
var a = window.dialogArguments
alert("您传递的参数为window对象Q名Uͼ" + a.name)
</script>
可以通过window.returnValue向打开对话框的H口q回信息Q当然也可以是对象。例如：
test4.htm
===================
<script>
var a = window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++) alert(a[i])
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value="q回" type=button onclick="sendTo()">
</form>
常见问题Q?nbsp;
1Q如何在模态对话框中进行提交而不新开H口Q?nbsp;
如果?nbsp;?nbsp;览器是IE5.5+,可以在对话框中用带name属性的iframeQ提交时可以制定targetiframe的name。对于IE4+Q你可以用高度ؓ0的frame来作Q例子，
test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗Q?nbsp;
{案是不能。但在frame里是可以的?
]]>
<style>
.close{
visibility:hidden;
border : 1px solid #008000;
position:absolute;
}
.open{
visibility:visible;
border : 1px solid #008000;
position:absolute;
}
</style>
<script language='JavaScript'>
//—————显C单项 menuId:当前菜单Id————?br> function showMenuItem(menuId) {
var node = document.getElementById(menuId);
if(node.hasChildNodes()) {
node.style.visibility='visible';
}
}
//—————隐藏菜单项 menuId:当前菜单Id————?br> function hideMenuItem(menuId) {
document.getElementById(menuId).style.visibility='hidden';
}
//—————隐藏菜单项事gҎ————?br> function hideMenuItemEvent() {
event.srcElement.parentElement.style.visibility='hidden';
}
//—————初始化下拉框————?br> function inintSelectMenu() {
//查找一U节?br> var resultNodes = findXmlnodes("http://mainClass",resultNodes);
var mainClassNode = document.getElementById("mainClass");
//l一U节Ҏ加子子节?br> addChildrenNodes(mainClassNode,resultNodes);
//~存一U菜单选择的默认?br> var mainClassTxtNode = document.getElementById("mainClassTxt");
var mainClassBtnNode = document.getElementById("mainClassBtn");
mainClassTxtNode.setAttribute("tempId",1);
//讄下拉菜单l对位置
setDivAbsulotePosition(mainClassNode,mainClassTxtNode);
//讄Btn的绝对位|?br> //mainClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(mainClassBtnNode,mainClassTxtNode);
//一U菜?br> mainClassNode.attachEvent(onblur,hideMenuItem);
//二菜单
var subClassNode = document.getElementById("subClass");
var subClassBtnNode = document.getElementById("subClassBtn");
var subClassTxtNode = document.getElementById("subClassTxt");
setDivAbsulotePosition(subClassNode,subClassTxtNode);
//讄Btn的绝对位|?br> //subClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(subClassBtnNode,subClassTxtNode);
//三菜单
var itemClassNode = document.getElementById("itemClass");
var itemClassBtnNode = document.getElementById("itemClassBtn");
var itemClassTxtNode = document.getElementById("itemClassTxt");
setDivAbsulotePosition(itemClassNode,itemClassTxtNode);
//讄Btn的绝对位|?br> //itemClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(itemClassBtnNode,itemClassTxtNode);
}
//—————更C拉菜单————?br> function updateSelectMenu() {
//被选择节点Id
var nodeId = event.srcElement.getAttribute("id");
//被选择节点文本子节点名
var nodeName = event.srcElement.title != null > 5 ? event.srcElement.title : event.srcElement.childNodes.item(0).nodeValue;
//被选择节点父节?br> var parentNode = event.srcElement.parentElement;
//被选择节点父节点Id
var parentNodeId = parentNode.getAttribute("id");
//l文本框赋被选择?br> document.getElementById(parentNodeId + "Txt").setAttribute("value",nodeName);
//如果被选择的是一U菜单，更新二、三U菜?br> if(parentNodeId == "mainClass") {
//~存一U菜单选择
document.getElementById(parentNodeId + "Txt").setAttribute("tempId",nodeId);
//清空二菜单列表
document.getElementById("subClassTxt").setAttribute("value","请选择");
//清空三菜单列表
document.getElementById("itemClassTxt").setAttribute("value","请选择");
//U除二节点
removeChildNodes("subClass");
//U除三节点
removeChildNodes("itemClass");
//查找二节点
var resultSubNodes = findXmlnodes("http://mainClass[@id=" + nodeId + "]/subClass",resultSubNodes);
//alert(resultSubNodes.length);
var subNode = document.getElementById("subClass");
//l二U节Ҏ加子子节?br> addChildrenNodes(subNode,resultSubNodes);
}
//如果更新的是二菜单Q更CU菜?br> if(parentNodeId == "subClass") {
//获得一U菜单缓存?br> var mainClassId = document.getElementById("mainClassTxt").getAttribute("tempId");
//清空三菜单列表
document.getElementById("itemClassTxt").setAttribute("value","请选择");
removeChildNodes("itemClass");
//U除三节点
removeChildNodes("itemClass");
//查找三节点
var resultItemNodes = findXmlnodes("http://mainClass[@id=" + mainClassId + "]/subClass[@id=" + nodeId + "]/item",resultItemNodes);
//alert(resultItemNodes.length);
var itemNode = document.getElementById("itemClass");
//l三U节Ҏ加子子节?br> addChildrenNodes(itemNode,resultItemNodes);
}
}
//—————添加子节点列表 parentNodeQ?父节? childrenNodes: 子节点列表————?br> function addChildrenNodes(parentNode,childrenNodes) {
for(i = 0; i < childrenNodes.length; i++) {
//var tempNode = childrenNodes.item(i);
//prompt("tempNode",tempNode.xml);
createNode("div",childrenNodes.item(i).getAttribute("id"),childrenNodes.item(i).getAttribute("name"),parentNode);
//alert(childrenNodes.item(i).getAttribute("name") + " " + childrenNodes.item(i).getAttribute("id"));
}
}
//—————创建子节点Qƈd到父节点 type: 节点cd, idQ节点Id, txt:文本节点文本|parentNodeQ?父节?————?br> function createNode(type,id,txt,parentNode) {
//文本节点
var txtNode = null;
//需创徏的子节点
var subNode = null;
//判断节点cd是否为空QؓI直接返?br> if(type == null) {
return;
}
//创徏节点
subNode = document.createElement(type);
//判断是否包含文本是否为空Q不为空则创建ƈd文本子节?br> if(txt != null) {
//讄文本节点弹出文字
if(checkSelectMenuItemLength(txt)){
subNode.title = txt;
var txtTemp = txt.substring(0, 5) + "..." ;
//创徏文本节点
txtNode = document.createTextNode(txtTemp);
}else {
txtNode = document.createTextNode(txt);
}
//d文本节点
subNode.appendChild(txtNode);
}
//判断id是否为空Q不为空则添加id属?br> if(id != null) {
subNode.setAttribute('id',id);
}
subNode.attachEvent("onclick",hideMenuItemEvent);
subNode.attachEvent("onclick",updateSelectMenu);
subNode.attachEvent("onmouseover",romanceItem);
subNode.attachEvent("onmouseout",unRomanceItem);
//d新徏子节点到父节?br> parentNode.appendChild(subNode);
}
//—————查找数据节?condition: XPath查询条g, resultNodes:q回节点集合————?br> function findXmlnodes(condition,resultNodes) {
//判断查询条g是否为空
if(condition == null) {
return;
}
// 初始化ActiveXObject DOMDocment对象
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
// 讄异步方式
xmlDoc.async=false;
// 加蝲xml
xmlDoc.load(document.getElementById("mainClassTxt").getAttribute("xmlSrc"));
// 指定查询语言
xmlDoc.setProperty("SelectionLanguage","XPath");
// 查询q获得节?
resultNodes = xmlDoc.documentElement.selectNodes(condition);
//alert(resultNodes.length);
return resultNodes;
}
//—————移除所有子节点 pareantNodeNameQ?父节点名————?br> function removeChildNodes(pareantNodeName) {
var subNodes = document.getElementById(pareantNodeName).childNodes;
var subNodeslength = subNodes.length;
for (i = 0; i < subNodeslength; i++) {
subNodes.item(0).removeNode(true);
}
}
//—————渲染条目背景色————?br> function romanceItem() {
event.srcElement.style.backgroundColor="cornflowerblue";
}
//—————反渲染条目背景艜y———?br> function unRomanceItem() {
event.srcElement.style.backgroundColor="#ffffff";
}
//—————检条目长度————?br> function checkSelectMenuItemLength(txt) {
if(txt.length > 5)
return true;
else
return false;
}
//—————设|层的绝对坐?setNodeQ须讄坐标的节?consultNodeQ参照节?————?br> function setDivAbsulotePosition(setNode,consultNode) {
setNode.style.top = getPosition(consultNode).y + consultNode.offsetHeight;
setNode.style.left = getPosition(consultNode).x;
setNode.style.width = consultNode.offsetWidth;
}
function setBtnAbsulotePosition(setNode,consultNode) {
setNode.style.top = getPosition(consultNode).y;
setNode.style.left = getPosition(consultNode).x + consultNode.offsetWidth;
}
//—————获取参照节点的l对位置 nodeQ?参照节点————?br> function getPosition(node){
var left = 0;
var top = 0;
while (node.offsetParent){
left += node.offsetLeft;
top += node.offsetTop;
node = node.offsetParent;
}
left += node.offsetLeft;
top += node.offsetTop;
return {x:left, y:top};
}
</script>
<html>
<body onload="inintSelectMenu();">
<form>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<table>
<tr>
<td>
dc?br> <input type='text' id='mainClassTxt' readonly='true' value="请选择" xmlSrc="selectMenuData.xml">
<input id='mainClassBtn' type='button' value='>>' onclick="showMenuItem('mainClass');hideMenuItem('itemClass');hideMenuItem('subClass');" />
</input>
<div id='mainClass' class="close" >
</div>
</td>
<td>
子分c?br> <input type='text' id='subClassTxt' readonly='true' value="请选择" >
<input id='subClassBtn' type='button' value='>>' onclick="showMenuItem('subClass');hideMenuItem('mainClass');hideMenuItem('itemClass');"/>
</input>
<div id='subClass' class="close" >
</div>
</td>
<td>
?nbsp; ?br> <input type='text' id='itemClassTxt' readonly='true' value="请选择" >
<input id='itemClassBtn' type='button' value='>>' onclick="showMenuItem('itemClass');hideMenuItem('mainClass');hideMenuItem('subClass');" />
</input>
<div id='itemClass' class="close" >
</div>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
<----------------HTML部分--------------------->
<----------------XML部分--------------------->
<classes>
<mainClass id='1' name='book'>
<subClass id='1' name='computer'>
<item id='1' name='think in java'></item>
<item id='2' name='C#'></item>
<item id='3' name='javascript'></item>
</subClass>
<subClass id='2' name='literature'>
<item id='1' name='literaturea'></item>
<item id='2' name='literatureb'></item>
<item id='3' name='literaturec'></item>
</subClass>
<subClass id='3' name='test'>
<item id='1' name='testaaaa'></item>
<item id='2' name='testbbbb'></item>
<item id='3' name='testcccc'></item>
</subClass>
<subClass id='4' name='ssssss'>
<item id='1' name='sssssssaaa'></item>
<item id='2' name='sssssssbbb'></item>
<item id='3' name='sssssssccc'></item>
</subClass>
</mainClass>
<mainClass id='2' name='book2'>
<subClass id='1' name='computer2'>
<item id='1' name='think in java2'></item>
<item id='2' name='C#2'></item>
<item id='3' name='javascript2'></item>
</subClass>
<subClass id='2' name='literature2'>
<item id='1' name='literaturea21'></item>
<item id='2' name='literatureb22'></item>
<item id='3' name='literaturec23'></item>
</subClass>
<subClass id='3' name='test2'>
<item id='1' name='testaaaa21'></item>
<item id='2' name='testbbbb22'></item>
<item id='3' name='testcccc23'></item>
</subClass>
<subClass id='4' name='ssssss2'>
<item id='1' name='sssssssaaa21'></item>
<item id='2' name='sssssssbbb22'></item>
<item id='3' name='sssssssccc23'></item>
</subClass>
</mainClass>
<mainClass id='3' name='book3'>
<subClass id='1' name='computer3'>
<item id='1' name='think in java3'></item>
<item id='2' name='C#3'></item>
<item id='3' name='javascript3'></item>
</subClass>
<subClass id='2' name='literature3'>
<item id='1' name='literaturea31'></item>
<item id='2' name='literatureb32'></item>
<item id='3' name='literaturec33'></item>
</subClass>
<subClass id='3' name='test3'>
<item id='1' name='testaaaa31'></item>
<item id='2' name='testbbbb32'></item>
<item id='3' name='testcccc33'></item>
</subClass>
<subClass id='4' name='ssssss3'>
<item id='1' name='sssssssaaa31'></item>
<item id='2' name='sssssssbbb32'></item>
<item id='3' name='sssssssccc33'></item>
</subClass>
</mainClass>
<mainClass id='4' name='book4'>
<subClass id='1' name='computer4'>
<item id='1' name='think in java4'></item>
<item id='2' name='C#4'></item>
<item id='3' name='javascript4'></item>
</subClass>
<subClass id='2' name='literature4'>
<item id='1' name='literaturea41'></item>
<item id='2' name='literatureb42'></item>
<item id='3' name='literaturec43'></item>
</subClass>
<subClass id='3' name='test4'>
<item id='1' name='testaaaa41'></item>
<item id='2' name='testbbbb42'></item>
<item id='3' name='testcccc43'></item>
</subClass>
<subClass id='4' name='ssssss4'>
<item id='1' name='sssssssaaa41'></item>
<item id='2' name='sssssssbbb42'></item>
<item id='3' name='sssssssccc43'></item>
</subClass>
</mainClass>
</classes>
<----------------XML部分--------------------->
]]>
]]>