`
sj972
  • 浏览: 14204 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

打开关闭DIV窗口的简单例子

JavaScriptCSSHTML 
阅读更多
看着别人可以打开或关闭DIV窗口，感觉比较好奇是怎么实现的，今天也稍微研究了一下。
html 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>打开关闭DIV例子</title>  
  6. <style type="text/css">  
  7. #div1 {  
  8.     margin: 10px auto;  
  9.     width: 300px;  
  10.     height: 300px;  
  11.     border: 2px #cccccc solid;  
  12. }  
  13.   
  14. #div2 {  
  15.     float: right;  
  16.     background-color: yellow;  
  17.     cursor: default;  
  18. }  
  19.   
  20. #div3 {  
  21.     clear: both;  
  22.     margin: 50px auto;  
  23. }  
  24. </style>  
  25. <script type="text/javascript">  
  26.     function openWin(){  
  27.         if(!document.getElementById("div1")){  
  28.             var div1 = document.createElement("div");  
  29.             div1.id = "div1";  
  30.             document.body.appendChild(div1);  
  31.               
  32.             var div2 = document.createElement("div");  
  33.             div2.id="div2";  
  34.             div2.onclick = closeWin;  
  35.             div2.onmouseover=overDIV2;  
  36.             div2.onmouseout=outDIV2;  
  37.             div2.innerHTML = "DEL";  
  38.             div1.appendChild(div2);  
  39.               
  40.             var div3 = document.createElement("div");  
  41.             div3.id="div3";  
  42.             div3.innerHTML="这是我们能看见的窗口，点一下DEL就消失了！";  
  43.             div1.appendChild(div3);  
  44.         }  
  45.     }  
  46.       
  47.     function closeWin(){  
  48.         var div=document.getElementById("div1");  
  49.         if(div != null){  
  50.             div.parentNode.removeChild(div);  
  51.         }  
  52.     }  
  53.       
  54.     function overDIV2(){  
  55.         var div=document.getElementById("div2");  
  56.         if(div != null){  
  57.             div.style.backgroundColor="#FFFFFF";  
  58.         }  
  59.     }  
  60.     function outDIV2(){  
  61.         var div=document.getElementById("div2");  
  62.         if(div != null){  
  63.             div.style.backgroundColor="yellow";  
  64.         }  
  65.     }  
  66. </script>  
  67. </head>  
  68. <body>  
  69. <br>  
  70. <br>  
  71. <div align="center"><input type="button" value="打开窗口"  
  72.     onclick="openWin()"></div>  
  73. <div id="div1">  
  74. <div id="div2" onclick="closeWin()" onmouseover="overDIV2()"  
  75.     onmouseout="outDIV2()">DEL</div>  
  76. <div id="div3">这是我们能看见的窗口，点一下DEL就消失了！</div>  
  77. </div>  
  78. </body>  
  79. </html>  

原来也是很简单的。
分享到：
| 用递归法打印出九九乘法口诀
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:&lt;html&gt; &lt;head&gt; &lt;title&gt;JS+CSS实现带关闭按钮的DIV弹出窗口&lt;/title&gt; [removed]...

    JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考，具体如下： 在一些不正规的网站，尤其是那些挂满广告的下载站，经常在你点击的下载链接之前，无论你点击网页的...

    JavaScript实现自动弹出窗口并自动关闭窗口的方法

    这里介绍的JavaScript自动弹出窗口并自动关闭窗口，JS实现此特效似乎很简单，打开网页后即显示一个弹出窗口，之后会自动离开，使用了window.open和document.open();以及document.close();对象共同来实现，现在似乎用...

    layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

    使用layer实现登录弹框，登录成功以后关闭弹框，并调用父窗口方法。 1.界面如下： 2.login.html的界面主要代码: &lt;div class=layer_form&gt; &lt;div class=form_item&gt; 手机号码： &lt;div class=form_item_input&gt; &lt;...

    JavaScript网页特效范例宝典源码

    实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...

    ASP.NET开发实战1200例（第Ⅰ卷）第十二章

    实例296 利用JavaScript打开新窗口显示广告 信息 470 实例297 利用JavaScript实现自动关闭的广告 窗口 472 实例298 利用JavaScript居中显示弹出的窗口 473 实例299 双击数据行打开新窗口显示详细信息 475 实例300 ...

    程序天下:JavaScript实例自学手册

    12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13...

    Js CSS仿Windows桌面菜单及图标的效果.rar

    　div1 层ID,相同ID的层不能重复打开 　标题 窗口标题 　demo.htm 加载的页面,用AJAX加载,不支持JS脚本 　500 窗口宽度 　300 窗口高度 　100 距离顶部多少象素 　250 距离左边多少象素 　1 样式,1...

    《程序天下：JavaScript实例自学手册》光盘源码

    12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票系统中单选按钮与复选框的应用 203 实例171 选中单选按钮后显示其他表单元素 205 实例172 不提交表单获取...

    PHP程序开发范例宝典III

    实例085　打开居中显示详细信息的新窗口　126 实例086　关闭弹出窗口时自动刷新父窗口　128 实例087　在弹出的对话框中选择个性头像　130 实例088　自动关闭的广告窗口　131 实例089　关闭IE主窗口时，不弹出询问...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 201 3.4 表单元素的动态操作 203 实例170 投票系统中单选按钮与复选框的应用 203 实例171 选中单选按钮后显示其他表单元素 205 实例172 不提交表单获取...

    55种网页小技巧 ---- 下载无需扣分，具有一定收藏价值

    在打开的子窗口刷新父窗口的代码里如何写.html 在网页中用按钮来控制前页，后页和主页的显示.html 在规定时间内跳转.html 在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动.html 如何设定打开页面的...

    无限菜单之 xml+popup 版(IE5.5+)

    要用Popup制作菜单一个最重要的问题就是要解决多个Popup共存的问题，Msdn上的描述是：“一个Popup窗口打开后，当另一个Popup窗口被打开时就会自动关闭”。我本来一直以为Popup窗口是不可以多个共存的，不过偶然从51...

    JavaScript打印网页指定区域的例子

    JavaScript打印页面指定div区域原理：使用window.open()在浏览器打开一个新的页面（window）, 使用 window.[removed]()将指定div区域的内容写入新窗口文档，document.close()关闭文档，使用window.print()调用打印机...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    精通JavaScript

    • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3.htm DOM结点属性 • 12.4.htm 文档树检测 • 12.5.htm 结点插入与追加 • 12.6.htm ...

    JavaScript应用177例

    18.2.htm 关闭窗口 18.3.htm 窗口写入 18.4.htm 窗口交互 18.5.htm 提示与警告对话框 第19章（\cha19） 19.1.htm 窗口移动 19.2.htm 改变大小 19.3....

    dreamweaver的各种组件

    close onblur 光标移出窗口时自动关闭该窗口 CSS on resolution 根据不同的分辨率调入相应的外部css文件 Css on platform 根据不同的操作系统调入相应的外部css文件 Css on Browser 根据不同的浏览器调入相应的...

Magicbox
Global site tag (gtag.js) - Google Analytics