modalDialog的使用,图片切换，点击图片时打开一个窗体，并显示信息
//主窗体
//与open的区别：1、参数二是传递的参数 2、属性设置格式：属性=属性值; 3、dialogHeight与dialogWidth没有单位，即需要自己加上px
//window.showModalDialog
//("modalDialog.html",window,"dialogHeight=300px;dialogWidth=300px;scroll=yes;status=yes;dialogTop=100;dialogLeft=100;resizable=1");
<script language="javascript" type="text/javascript">
//图片的描述
var names=[["猫","这是只好猫"],["篮球运动员","非常强"],["登录","欢迎"],["书","好好读书"]];
//图片地址
var imgs=["img//cat1.gif","img\\xiaoniu.jpg","img//login.jpg","img//书END.jpg"];
//索引
var index=1;
//图片自动切换
function changeImg(){
if(index==4){
index=0;
}
document.getElementById("img").src=imgs[index];
index++;
}
//点击span切换图片
function clickSpan(){
var spans=document.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
//为每个span标签添加一个点击事件
spans[i].onclick=function(){
index=this.innerHTML-1;
document.getElementById("img").src=imgs[index];
};
}
}
window.onload=clickSpan;
window.setInterval("changeImg()",1000);
</script>
<body>
<p align="center">图片动态切换效果</p>
<img src="img/cat1.gif" id="img" width="160" height="160" onclick="javascript:window.showModalDialog('hw1_Hw2_1.html',window)"/><br />
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
//打开的窗体
<script language="javascript" type="text/javascript">
function show(){
//获取打开这个窗体的窗体对象
var win= window.dialogArguments;
//获取窗体对象中的names数组的元素
var name=win.names[win.index-1];
//获取窗体对象的url数组的元素
//第一种方法
//var url=win.imgs[win.index-1];
//第二种方法
//var url=win.document.getElementById("img").src;
document.writeln("<img src='"+url+"' width='260' height='300' align='left'/>");
document.write("名称："+name[0]+"<br>");
document.write("描述："+name[1]+"<br>");
//window.dialogArguments获取打开本模式窗体的窗体
//window.dialogArguments.location.href="打开窗体以及父窗体刷新.html";//刷新
//window.close();//关闭
}
window.onload=show;
</script>