`
sj972
  • 浏览: 14425 次
  • 性别: 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>  

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

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

相关推荐

    div css窗口 模态窗口

    在网页设计中，`div` 和 `css` 是构建页面布局和样式的重要工具，而模态窗口（Modal Window）则是用户界面设计中的一个常见元素。模态窗口是一种弹出式的对话框，它会覆盖住主页面，使得用户必须先与模态窗口交互...

    jquery jBox 仿QQ空间 DIV窗口

    **jQuery jBox：仿QQ空间DIV窗口** 在Web开发中，弹出窗口是常见的交互元素，用于显示消息、警告、确认对话框等。jQuery jBox是一个轻量级、可高度定制的插件，用于创建此类浮动窗口。它以其灵活性和与QQ空间弹窗...

    JS打开关闭移动层动画实例

    ### JS打开关闭移动层动画实例知识点解析 #### 一、概览 本示例通过JavaScript实现了div元素的显示、隐藏及拖动功能。这在网页交互设计中非常实用，能够帮助用户更好地操作页面上的浮动窗口或者菜单等组件。 ####...

    jquery 弹出窗口简单例子

    Popup或模态对话框是一种在主页面之上打开的浮动窗口，它阻止用户与背景内容交互，直到弹出窗口被关闭。这通常通过CSS实现视觉效果，而逻辑则由JavaScript驱动，特别是jQuery库。 创建一个jQuery弹出窗口需要以下...

    jquery div模态窗口的简单实例

    模态窗口的一个特点是在打开时阻止用户与页面的其他部分进行交互，直到模态窗口被关闭。这样的窗口可以增强用户体验，同时使页面的其他内容保持不变。 为了创建一个模态窗口，我们需要HTML、CSS和JavaScript的结合...

    DIV制作浮在页面的窗口.rar

    另外，还可以添加打开和关闭窗口的交互，比如点击按钮显示或隐藏窗口，这需要用到JavaScript的DOM操作和事件处理函数。 在提供的文件列表中，有`index.htm`和`说明.htm`两个文件。`index.htm`很可能是包含上述技术...

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

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

    JQUery弹出div层窗口，附带jquery的js文件，可以直接运行

    在这个名为“JQuery弹出div层窗口”的项目中，开发者提供了一个使用jQuery实现的弹出对话框功能，这个功能允许用户在不离开当前页面的情况下显示额外的信息或者进行交互。 首先，我们来理解`index.html`文件。这是...

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

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

    javascript div弹出窗口 可封装为JS类

    在JavaScript编程中，"div弹出窗口"是一种常见的交互式设计，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块，如图片画廊、表单等。在本...

    div弹出窗口.rar

    在网页设计中，"div弹出窗口"是一个...总结，"div弹出窗口"是一个结合了HTML结构、CSS样式和JavaScript交互的实例，通过学习这个例子，我们可以更好地理解和掌握网页动态效果的实现，同时提高网页的用户体验和交互性。

    jquery jBox v2.3 beta 仿QQ空间 DIV窗口.zip

    《jQuery jBox v2.3 Beta：仿QQ空间DIV窗口技术解析》 在网页开发中，弹出式窗口是常用的一种交互设计元素，用于显示通知、对话框、提示信息等。jQuery jBox是一款基于jQuery的插件，它提供了一种灵活、可定制的...

    jBox(Div模式窗口兼容各种浏览器)

    **jBox - 一个跨浏览器的Div模式窗口控件** 在网页开发中，有时我们需要创建一个弹出式的对话框来与用户交互，如显示信息、警告或者获取输入。传统的`window.showModalDialog()`方法虽然方便，但在某些浏览器或...

    js\DIV-弹出窗口

    "js\DIV-弹出窗口"是一个关于使用JavaScript创建浮动窗口或者对话框的主题。在网页设计中，弹出窗口通常用于显示警告、确认信息、表单输入或者其他需要用户关注的内容，而不用离开当前页面。 弹出窗口主要分为两种...

    jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

    在本文中，我们将探讨如何使用jQuery实现特定的交互效果：点击某个div元素时打开一个层，而点击其他div元素时关闭该层。此外，本文将重点介绍如何处理事件冒泡，以防止出现不符合预期的交互行为。 ### jQuery实现...

    div弹出窗口.可打包成JS文件

    在这里，开发者可以定义自己的弹出窗口类，包含打开、关闭、设置内容等方法，以及处理用户交互的事件监听器。这样，其他开发者或设计师可以很容易地基于这个类创建符合项目需求的自定义弹出窗口实例。 文件列表中的...

    基于JavaScript实现的lhgdialog DIV弹出窗口框架

    传统的Alert弹出窗口虽然简单易用，但其样式单一且功能有限。为了解决这个问题，开发者们创造出了各种自定义的弹出窗口框架，其中lhgdialog就是一个基于JavaScript实现的优秀实例。 lhgdialog框架是一个轻量级的、...

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    在本文中，我们将深入探讨如何使用jQuery来实现一个可单击弹出的Div层窗口，同时具备可关闭和拖动的功能。这个功能在许多网页应用中都非常常见，它能够为用户提供交互式的用户体验，例如提示信息、用户反馈或者简单...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    // 关闭窗口时的回调，可以在此处理关闭事件 } }); ``` 3. 传值到子页面：可以在`href`参数中通过查询字符串传递简单的数据。例如： ```javascript href: 'subPage.html?parentId=123' ``` 在子页面中，可以通过`...

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