我们要做的效果就是:在注册页面，我们点击选择头像，就会弹出一个对话框，陈列一组头像供我们选择，我们选中一个"确定"后，对话框消失，注册页面出现刚刚选择的头像。就是这样，很多编辑器就是这样的。
难点:1.在窗口之间如何传值(不是页面的那种传值)。
2.如何获取单选框的值。
废话多说无益，直接进入主题.
我们的解决方案是:
1.通过window对象的ShowModialog()弹出一个对话框，通过对话框中的returnValue再传给父窗口。
2.通过遍历窗口中的单选框控件的checked来获取单选框的值。
下面我以实例说明:
1.在主页面(父页面)加入js代码:
<script language="javascript" type="text/javascript">
function ReturnImg()
{
//heading.htm就是弹出的对话框的页面
var a=window.showModalDialog("headimg.htm",window,"dialogHeight:310px; dialogWidth:260px;center:yes;")//参数表示控制对话框内容，对象，对话框的大小。
if(a==undefined)//对用户关掉对话框时传值为undefined的处理
{
document.getElementById("ShowHeadimg").innerHTML="<img src='headimg/1.gif'/>";
}
else
{
document.getElementById("ShowHeadimg").innerHTML="<img src='headimg/"+a+".gif'/>";
}
}
</script>
body代码为:(css代码略)
<body>
<form id="form1" runat="server">
<div>
<table class="style1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">注册</td>
</tr>
<tr>
<td style="width:30px;"> 姓名:</td>
<td colspan="2">谦虚的天下</td>
</tr>
<tr>
<td>头像:</td>
<td style="width:40px; height:40px;">
<div id="ShowHeadimg"></div>//用来显示头像的层
</td>
<td>
<input id="Button2" type="button" value="选择>>" onclick="ReturnImg()" />
//调用js函数，弹出对话框
</td>
</tr>
<tr>
<td colspan="3">
<input id="Button1" type="button" value="提交" /></td>
</tr>
</table>
</div>
</form>
</body>
headimg.htm的代码是:
//下面的js代码遍历文中的radio控件，获取用户选中的值，就是前面的难点2
js代码是:<script language="javascript" type="text/javascript">
function GetRadioImg(){
var Rvalue = form1.Radio.value;
for(var i=0;i<form1.Radio.length;i++)
{
if(form1.Radio[i].checked==true)
{
Rvalue = form1.Radio[i].value;
break;
}
}
window.returnValue=Rvalue;//通过returnValue传回参数，就是前面的难点1
window.close();
}
</script>
body代码是:<body>
<form id="form1">
<div class="style1">
<table>
<tr>
<td>
<img src="headimg/1.gif" /><br /><input id="Radio" checked="checked" name="R1"
type="radio" value="1" /></td>
<td>
<img src="headimg/2.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="2" /></td>
<td>
<img src="headimg/3.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="3" /></td>
<td>
<img src="headimg/4.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="4" /></td>
<td>
<img src="headimg/5.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="5" /></td>
<td>
<img src="headimg/6.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="6" /></td>
</tr>
<tr>
<td>
<img src="headimg/7.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="7" /></td>
<td>
<img src="headimg/8.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="8" /></td>
<td>
<img src="headimg/9.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="9" /></td>
<td>
<img src="headimg/10.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="10" /></td>
<td>
<img src="headimg/11.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="11" /></td>
<td>
<img src="headimg/12.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="12" /></td>
</tr>
<tr>
<td>
<img src="headimg/13.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="13" /></td>
<td>
<img src="headimg/14.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="14" /></td>
<td>
<img src="headimg/15.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="15" /></td>
<td>
<img src="headimg/16.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="16" /></td>
<td>
<img src="headimg/17.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="17" /></td>
<td>
<img src="headimg/18.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="18" /></td>
</tr>
<tr>
<td>
<img src="headimg/19.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="19" /></td>
<td>
<img src="headimg/20.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="20" /></td>
<td>
<img src="headimg/21.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="21" /></td>
<td>
<img src="headimg/22.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="22" /></td>
<td>
<img src="headimg/23.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="23" /></td>
<td>
<img src="headimg/24.gif" alt=""/><br /><input id="Radio" name="R1"
type="radio" value="24" /></td>
</tr>
<tr>
<td colspan="6">
<input id="Button1" type="button" value="确定" onclick="GetRadioImg()"/></td>
</tr>
</table>
</div>
</form>
</body>
|
