<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>点击一个连接显示层~点击其他区域隐藏 练习 by 脚本之家</title>
<style type="text/css">
#myDiv{
border:1px solid #000000;
width:200px;
height:100px;
background:#cccccc;
}
</style>
<script language="JavaScript" type="text/javascript">
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
}
}
addListener(document,"click",function(evt){
var evt = window.event?window.event:evt,target=evt.srcElement||evt.target;
if(target.id == "showDiv"){
document.getElementById("myDiv").style.display = "";
return;
}else{
while(target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html"){
target = target.parentNode;
}
if(target.nodeName.toLowerCase() == "html"){
document.getElementById("myDiv").style.display = "none";
}
}
})
</script>
</head>
<body>
<div id="myDiv" style="display:none;"><a href="http://www.jb51.net" target="_blank">脚本之家</a></div>
<input type="button" value="出来吧层" id="showDiv" />
</body>
</html>
分享到：
相关推荐
标题“空白处点击关闭DIV层”涉及到的是网页交互设计中的一个常见需求，即通过点击页面上的空白区域来隐藏或关闭某个浮动的DIV层。在网页设计中，DIV元素常用于布局和内容组织，而实现这一功能通常是通过JavaScript...
该文件内容介绍了如何使用JavaScript通过遮罩层技术实现点击某个区域以外的区域来弹出或关闭弹窗的功能。以下是详细的知识点阐述： 首先，我们需要理解遮罩层的概念。遮罩层通常用于页面上某些内容的高亮显示或是...
// 点击其他区域关闭 } else { this.listLineUl = true; } }); } ``` 这里，`$el`代表Vue实例对应的DOM元素。当点击事件发生时，检查事件是否发生在当前Vue实例的元素内。如果不是，则关闭自定义div。 ### ...
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
在网页开发中，有时我们需要创建一个可点击的`DIV`元素，当用户点击其他区域时，这个`DIV`会自动关闭。这个问题的核心在于事件处理和事件冒泡的控制。事件冒泡是指事件从最深的节点开始，逐级向上传播到父节点的过程...
- **交互性增强**：除了基本的显示与隐藏功能外，还可以通过JavaScript为遮罩层添加更多交互逻辑，如点击遮罩层时关闭弹窗、加载指示器等。 总之，DIV遮罩层是一种简单而有效的网页设计技巧，它不仅能够帮助开发者...
模态窗口可能包含标题、内容区域、关闭按钮等元素。 2. CSS样式：CSS文件将定义模态窗口的外观，包括尺寸、颜色、边框、阴影、位置等。同时，会有一个CSS类用于设置背景的半透明效果，以实现遮罩层的效果。 3. ...
在网页设计和开发中，"DIV层拖动、关闭、打开"是一个常见的功能，它涉及到用户界面的交互性和用户体验。这个功能通常应用于弹出框、模态窗口或者对话框等元素，使得用户能够通过拖动调整层的位置，通过关闭和打开...
首先，`div` 是HTML中的一个块级元素，用于定义页面上的一个区域。在构建模态对话框时，我们通常会创建一个隐藏的 `div` 元素，然后通过 JavaScript 来控制它的显示和隐藏，以实现对话框的效果。 `dd.html` 文件...
在实现遮罩层或弹出窗口时，`div`通常设置为全屏，并添加透明度和点击事件，以实现点击任何地方关闭的效果。下面是一个简单的例子： ```html .overlay { position: fixed; top: 0; left: 0; width: 100%; ...
在实际应用中，可能还需要考虑边界限制，确保Div不会拖出父容器的范围，或者添加防止误触的条件，比如只有当用户点击特定区域时才能拖动。 为了提高可维护性和复用性，可以将这些功能封装成一个自定义的拖拽插件，...
- **关闭机制**：弹窗应有关闭按钮或点击非弹窗区域关闭的功能，这需要添加相应的事件处理和逻辑判断。 6. **优化与兼容性**： - **性能优化**：避免频繁的DOM操作，使用事件委托，合理利用缓存，以提高页面性能...
然后，当用户点击页面其他区域时，该 `<div>` 将失去焦点，触发 `blur` 事件。 标签 "div+blur" 更进一步强调了对 `<div>` 元素和 `blur` 事件的关注。在实际应用中，我们可能希望在某个区域（例如一个弹出框或模态...
此外，我们还需要处理`div`的关闭逻辑，比如点击关闭按钮或点击页面其他区域时隐藏`div`。 测试代码通常会包含以下部分： 1. 创建`iframe`，并设置`src`属性指向要加载的HTML文档。 2. 使用CSS设置`z-index`，确保...
Div（Division）是一种HTML标签，用于将页面内容划分为多个区域，而CSS（Cascading Style Sheets）则负责定义这些区域的外观和布局。在这个"div css显示对联带关闭代码.rar"压缩包中，很显然包含了一个实现对联显示...
在描述中提到的“前辈的成果，显示所需要的页面，第一个页面隐藏”，可能指的是使用`div`作为初始页面，然后通过某种用户交互（如点击按钮）来显示`iframe`内容，同时`div`作为背景或者遮罩层，使得`iframe`内容成为...
此外，我们还添加了一个额外的点击事件监听整个文档，当点击非弹窗区域时，隐藏弹窗。这提供了更好的用户体验，让用户可以通过点击背景关闭弹窗。 请注意，以上代码适用于大部分情况，但在某些特定的布局或动态内容...
描述中提到的"Div模拟对话框"可能是指利用CSS来控制`div`的样式，使其看起来像一个弹出的对话框，包括标题、内容区域、关闭按钮等元素。为了实现对话框的浮动效果，可以设置`position`为`absolute`或`fixed`，使其...