`
阅读更多

【前言】

    本文分享个常见的特效,点击其他区域即元素外时隐藏元素。

 

【主体】

    主要利用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>

 

 

.

分享到:
评论

相关推荐

    简单纯js实现网页tab选项卡切换效果

    本教程将详细讲解如何使用纯JavaScript实现简单的选项卡切换效果。 首先,我们需要在HTML中创建选项卡结构。通常,一个选项卡组件包含一组标签(tab headers)和相应的内容区域(tab panes)。每个标签对应一个内容...

    纯JS实现的焦点图代码

    4. **CSS样式**:虽然主要讨论的是JavaScript实现,但CSS在控制焦点图布局、过渡动画以及隐藏/显示元素等方面也起着重要作用。例如,可以使用CSS的`display`属性来切换图片的可见性,使用`transition`属性来定义动画...

    纯JS实现的简单实用手风琴样式效果.zip

    在纯JS实现中,我们可以通过监听用户的点击事件,改变内容区域的CSS属性,如高度和可见性,来实现这种动画效果。 1. **HTML结构**:创建手风琴效果的第一步是设置合适的HTML结构。通常,每个面板由一个标题元素(如...

    Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    在纯JS中,我们可以使用`document.addEventListener('click', function(event) {...})`来实现这一功能。 但在Vue.js环境中,我们通常采用组件化的方式来组织代码,因此处理这个问题的方法会有所不同。Vue.js的应用...

    纯网页实现聊天功能

    【纯网页实现聊天功能】是一种基于Web技术的即时通讯(Instant Messaging, IM)解决方案,它无需借助复杂的服务器端中间件,而是主要利用浏览器自身的特性,如JavaScript和Ajax技术,实现用户之间的实时通信。...

    纯js写的tab标签切换

    在压缩包内的“纯js多重嵌套tab切换效果”文件中,很可能是提供了一个更复杂的示例,它可能包含了多层Tab嵌套的情况。在这种情况下,我们需要对每个层级的Tab按钮和内容分别进行处理,确保正确地切换到各个级别的...

    纯css3实现的tab标签切换效果

    此外,结合`:target`伪类,我们可以实现点击Tab后内容区的显示和隐藏。 4. **CSS3的content和attr()函数**:在某些情况下,我们可能希望Tab的文本内容来自HTML属性。这时,可以使用`::before`或`::after`伪元素,并...

    纯css+js实现webApp模态窗口弹出层特效

    本篇将围绕"纯CSS+JS实现WebApp模态窗口弹出层特效"这一主题展开,详细探讨相关知识点。 首先,模态窗口是一种半透明的覆盖层,它强制用户在完成指定操作或关闭窗口之前与之互动。弹出层则通常是指从页面中弹出的一...

    js Tab选项卡标签滑动带滚动条的内容滚动切换显示代码

    但纯JS实现也有其优点,例如更小的文件大小和更高的自定义性。 总结一下,这个项目涉及到的关键知识点包括: 1. JavaScript基础:事件监听、DOM操作、动画效果实现。 2. CSS样式设计:布局、隐藏/显示元素、滚动条...

    手机端点击滑动隐藏侧边栏菜单.zip

    - **实例1:纯CSS实现**:利用CSS3的过渡和媒体查询,创建一个简单的点击显示/隐藏的侧边栏菜单。 - **实例2:滑动动画**:增加滑动效果,用户滑动屏幕边缘时侧边栏滑入或滑出。 - **实例3:触摸滑动触发**:针对...

    【JavaScript源代码】js和jquery实现tab状态栏切换效果.docx

    点击事件处理函数与JavaScript实现类似,通过`$(this).index()`获取当前点击元素的索引,然后切换显示内容区域。 jQuery的优势在于其简洁的API,例如,使用`$(this).index()`和`$(".tab-show").eq(index).show()`等...

    纯javaScript、jQuery实现个性化图片轮播【推荐】

    本文介绍了一种通过纯JavaScript和jQuery技术实现个性化图片轮播的方法,该方法不仅提供了动态的图片展示功能,还具备了个性化和多样化的用户体验设计。 1. **CSS布局**:实现图片轮播首先需要一个良好的CSS布局。...

    纯CSS实现的雅虎TAB效效果

    纯CSS实现的Tab效果虽然可能没有JavaScript实现那样丰富的交互性,但其优势在于简化代码、减少加载时间以及提高可访问性。对于不支持JavaScript或JavaScript被禁用的用户,纯CSS Tab仍然可以正常工作。 在压缩包...

    纯JavaScript弹窗效果

    以上就是纯JavaScript实现弹窗效果的基本思路和关键点。通过掌握这些知识,你可以自由地创建各种自定义弹窗,满足不同场景的需求。记住,实践是检验真理的唯一标准,多动手尝试,结合实际项目进行练习,你会更加熟练...

    手风琴效果(纯js)

    在纯JavaScript实现的手风琴效果中,无需依赖任何外部库如jQuery,这有助于减小页面加载时间,提高网页性能。 一、JavaScript基础 在纯JavaScript实现手风琴效果时,我们需要了解JavaScript的基本语法,包括变量...

    JavaScript实现的带左右箭头的tab标签代码,tab里面可以放html代码,不限于文字

    在这个特定的项目中,我们讨论的是使用JavaScript实现的带左右箭头的tab标签功能,这使得用户可以通过点击箭头来切换不同的标签页,而且每个标签页内不仅限于显示文字,还可以包含HTML代码,提供更丰富的展示内容。...

    纯js实现悬浮按钮组件

    《纯JavaScript实现悬浮按钮组件详解》 在网页设计中,悬浮按钮(Floating Action Button, FAB)是一种常见的交互元素,通常用于提供主要的操作或者导航功能。本文将深入讲解如何使用纯JavaScript来创建一个灵活、...

    纯CSS实现的图片轮播(幻灯片)效果代码.zip

    不过,此案例中是使用CSS实现,所以可能包含了一些高级的CSS技巧,如CSS变量、伪类、动画和过渡效果等,以达到类似JavaScript实现的功能。 【压缩包子文件的文件名称列表】中的“使用须知.txt”可能提供了关于如何...

    js实现点击切换TAB标签实例

    文档中提到实现是“无jq,纯JS来实现”,这表明了文档更倾向于使用原生JavaScript而非jQuery库来完成任务。原生JavaScript提供了更丰富的API,使得开发者可以更细致地控制DOM操作,而不必依赖外部库。然而,使用...

    原生js写的弹窗效果(alert效果)

    1. **HTML结构**:创建一个隐藏的弹窗元素,包括标题、内容区域、按钮等。可以使用`&lt;div&gt;`或者其他合适的元素,通过CSS设置样式,使其看起来像一个弹窗。 2. **CSS样式**:编写CSS代码,定义弹窗的外观,如背景色、...

Global site tag (gtag.js) - Google Analytics