【前言】
本文分享个常见的特效,点击其他区域即元素外时隐藏元素。
【主体】
主要利用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”可能提供了关于如何...
文档中提到实现是“无jq,纯JS来实现”,这表明了文档更倾向于使用原生JavaScript而非jQuery库来完成任务。原生JavaScript提供了更丰富的API,使得开发者可以更细致地控制DOM操作,而不必依赖外部库。然而,使用...
1. **HTML结构**:创建一个隐藏的弹窗元素,包括标题、内容区域、按钮等。可以使用`<div>`或者其他合适的元素,通过CSS设置样式,使其看起来像一个弹窗。 2. **CSS样式**:编写CSS代码,定义弹窗的外观,如背景色、...