【前言】
本文分享个常见的特效，点击其他区域即元素外时隐藏元素。
【主体】
主要利用event事件对象（事件源）和冒泡实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.area{
position: fixed;
display: none;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: rgba(0,0,0,0.3);
}
.closeBtn{
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
border: none;
outline: none;
}
.closeBtn:hover{
background-color: rgba(255,0,0,0.3);
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form method="" action="">
<button type="button" class="login">登录</button>
</form>
<div class="area">
<button class="closeBtn">x</button>
</div>
<script type="text/javascript">
window.onload = function(){
function getByClass(classname){
return document.getElementsByClassName(classname);
}
var login = getByClass("login")[0];
var area = getByClass("area")[0];
var closeBtn = getByClass("closeBtn")[0];
// 显示
login.addEventListener("click",show,false);
function show(){
var client_width = document.body.clientWidth || document.documentElement.clientWidth;
var client_height = window.screen.height;
area.style.cssText = "display:block;width:"+client_width/2+"px;height:"+client_height/2+"px;"
}
// 关闭
closeBtn.addEventListener("click",close,false);
function close(){
area.style.cssText = "display:none";
}
// 点击其他位置关闭
document.onclick = function(event){
if(area.style.display == "block" && event.target.className != "login"){
if(event.target.className != area){
close();
}
}
}
//阻止冒泡
area.addEventListener("click",function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
event.stopPropagation();
})
}
</script>
</body>
</html>
.
相关推荐
本教程将详细讲解如何使用纯JavaScript实现简单的选项卡切换效果。 首先，我们需要在HTML中创建选项卡结构。通常，一个选项卡组件包含一组标签（tab headers）和相应的内容区域（tab panes）。每个标签对应一个内容...
4. **CSS样式**：虽然主要讨论的是JavaScript实现，但CSS在控制焦点图布局、过渡动画以及隐藏/显示元素等方面也起着重要作用。例如，可以使用CSS的`display`属性来切换图片的可见性，使用`transition`属性来定义动画...
在纯JS实现中，我们可以通过监听用户的点击事件，改变内容区域的CSS属性，如高度和可见性，来实现这种动画效果。 1. **HTML结构**：创建手风琴效果的第一步是设置合适的HTML结构。通常，每个面板由一个标题元素（如...
在纯JS中，我们可以使用`document.addEventListener('click', function(event) {...})`来实现这一功能。 但在Vue.js环境中，我们通常采用组件化的方式来组织代码，因此处理这个问题的方法会有所不同。Vue.js的应用...
【纯网页实现聊天功能】是一种基于Web技术的即时通讯（Instant Messaging, IM）解决方案，它无需借助复杂的服务器端中间件，而是主要利用浏览器自身的特性，如JavaScript和Ajax技术，实现用户之间的实时通信。...
在压缩包内的“纯js多重嵌套tab切换效果”文件中，很可能是提供了一个更复杂的示例，它可能包含了多层Tab嵌套的情况。在这种情况下，我们需要对每个层级的Tab按钮和内容分别进行处理，确保正确地切换到各个级别的...
此外，结合`:target`伪类，我们可以实现点击Tab后内容区的显示和隐藏。 4. **CSS3的content和attr()函数**：在某些情况下，我们可能希望Tab的文本内容来自HTML属性。这时，可以使用`::before`或`::after`伪元素，并...
本篇将围绕"纯CSS+JS实现WebApp模态窗口弹出层特效"这一主题展开，详细探讨相关知识点。 首先，模态窗口是一种半透明的覆盖层，它强制用户在完成指定操作或关闭窗口之前与之互动。弹出层则通常是指从页面中弹出的一...
但纯JS实现也有其优点，例如更小的文件大小和更高的自定义性。 总结一下，这个项目涉及到的关键知识点包括： 1. JavaScript基础：事件监听、DOM操作、动画效果实现。 2. CSS样式设计：布局、隐藏/显示元素、滚动条...
- **实例1：纯CSS实现**：利用CSS3的过渡和媒体查询，创建一个简单的点击显示/隐藏的侧边栏菜单。 - **实例2：滑动动画**：增加滑动效果，用户滑动屏幕边缘时侧边栏滑入或滑出。 - **实例3：触摸滑动触发**：针对...
点击事件处理函数与JavaScript实现类似，通过`$(this).index()`获取当前点击元素的索引，然后切换显示内容区域。 jQuery的优势在于其简洁的API，例如，使用`$(this).index()`和`$(".tab-show").eq(index).show()`等...
本文介绍了一种通过纯JavaScript和jQuery技术实现个性化图片轮播的方法，该方法不仅提供了动态的图片展示功能，还具备了个性化和多样化的用户体验设计。 1. **CSS布局**：实现图片轮播首先需要一个良好的CSS布局。...
纯CSS实现的Tab效果虽然可能没有JavaScript实现那样丰富的交互性，但其优势在于简化代码、减少加载时间以及提高可访问性。对于不支持JavaScript或JavaScript被禁用的用户，纯CSS Tab仍然可以正常工作。 在压缩包...
以上就是纯JavaScript实现弹窗效果的基本思路和关键点。通过掌握这些知识，你可以自由地创建各种自定义弹窗，满足不同场景的需求。记住，实践是检验真理的唯一标准，多动手尝试，结合实际项目进行练习，你会更加熟练...
在纯JavaScript实现的手风琴效果中，无需依赖任何外部库如jQuery，这有助于减小页面加载时间，提高网页性能。 一、JavaScript基础 在纯JavaScript实现手风琴效果时，我们需要了解JavaScript的基本语法，包括变量...
在这个特定的项目中，我们讨论的是使用JavaScript实现的带左右箭头的tab标签功能，这使得用户可以通过点击箭头来切换不同的标签页，而且每个标签页内不仅限于显示文字，还可以包含HTML代码，提供更丰富的展示内容。...
《纯JavaScript实现悬浮按钮组件详解》 在网页设计中，悬浮按钮（Floating Action Button, FAB）是一种常见的交互元素，通常用于提供主要的操作或者导航功能。本文将深入讲解如何使用纯JavaScript来创建一个灵活、...
不过，此案例中是使用CSS实现，所以可能包含了一些高级的CSS技巧，如CSS变量、伪类、动画和过渡效果等，以达到类似JavaScript实现的功能。 【压缩包子文件的文件名称列表】中的“使用须知.txt”可能提供了关于如何...
2. **标签选项卡**：通过JavaScript可以实现标签页的切换，当用户点击不同的选项时，对应的內容区域会显示或隐藏。这需要用到DOM遍历、事件处理和CSS类的动态添加与移除。 3. **交互反馈**：例如按钮点击后的加载...
文档中提到实现是“无jq,纯JS来实现”，这表明了文档更倾向于使用原生JavaScript而非jQuery库来完成任务。原生JavaScript提供了更丰富的API，使得开发者可以更细致地控制DOM操作，而不必依赖外部库。然而，使用...