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>

你可能感兴趣的:(dialog)