分享一个js弹出窗口展示的具体实例代码

时间:2021-11-23
类别:教程 - 网页设计

本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"
  4.   <meta charset="UTF-8"
  5.   <title></title> 
  6.   <style> 
  7.     body{ 
  8.       /*margin: 0;*/ 
  9.     } 
  10.     #div1{ 
  11.       width: 100px; 
  12.       height: 100px; 
  13.       border: 1px solid red; 
  14.     } 
  15.   </style> 
  16. </head> 
  17. <body> 
  18. <div id="div1" onmouseover="getInfo(this)" onmouseout="this.innerHTML=''"
  19.   
  20. </div> 
  21. <button onclick="getInfo()">获取div信息</button> 
  22.   
  23. <hr/> 
  24. <a href="111.html" rel="external nofollow" target="_blank">我是超链接</a> 
  25. <br/><br/> 
  26. <button onclick="myopen1()">新窗口111111111</button> 
  27. <button onclick="myopen2()">新窗口222222222</button> 
  28. <button onclick="myopen3()">新窗口333333333</button> 
  29.   
  30. <hr/> 
  31. <button onclick="myclose()">关掉子窗口</button> 
  32.   
  33. <script> 
  34.   var mywin; 
  35.   function myclose(){ 
  36.     if(mywin) 
  37.       mywin.close(); 
  38.   } 
  39.   function myopen3(){ 
  40.     mywin = window.open('333.html''news''resizable=no'); 
  41.   } 
  42.   function myopen2(){ 
  43.     mywin = window.open('222.html''news''resizable=no'); 
  44.   } 
  45.   function myopen1(){ 
  46.     mywin = window.open('111.html''news''resizable=no'); 
  47.   } 
  48.   function getInfo(obj){ 
  49. //    var div1 = document.getElementById('div1'); 
  50.   
  51.     obj.innerHTML = obj.offsetWidth+',,'+obj.offsetHeight; 
  52.     obj.innerHTML += '<br>'+obj.offsetLeft+',,'+obj.offsetTop; 
  53.     // offsetXXX 只能读取不能赋值修改 
  54.     obj.offsetWidth = obj.offsetWidth+100; 
  55.     // 下面的属性已经不能用了 
  56. //    obj.innerHTML += '<br>'+obj.innerWidth+',,'+obj.innerHeight; 
  57.   } 
  58. </script> 
  59. </body> 
  60. </html> 
    收藏