PHP速学视频免费教程(入门到精通)
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
本篇文章给大家带来的内容是关于js如何实现点击空白处就可以隐藏的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象,都是一些工作中比较常用的知识点。
nbsp;html> <meta> <title></title> <style> body { height:2000px; } #mask { width: 100%; height: 100%; opacity: 0.4; /*半透明*/ filter: alpha(opacity = 40); /*ie 6半透明*/ background-color: black; position: fixed; top: 0; left: 0; display: none; } #show { width: 300px; height: 300px; background-color: #fff; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -150px; display: none; } </style><a>注册</a> <a>登录</a> <p></p> <p></p> <script> function $(id) { return document.getElementById(id);} var login = document.getElementById("login"); login.onclick = function(event) { $("mask").style.display = "block"; $("show").style.display = "block"; document.body.style.overflow = "hidden"; // 不显示滚动条 //取消冒泡 var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } document.onclick = function(event) { var event = event || window.event; // alert(event.target.id); // 返回的是点击的某个对象的id 名字 // alert(event.srcElement.id); var targetId = event.target ? event.target.id : event.srcElement.id; // 看明白这个写法 if(targetId != "show") // 不等于当前点点击的名字 { $("mask").style.display = "none"; $("show").style.display = "none"; document.body.style.overflow = "visible"; // 显示滚动条 } } </script>
相关推荐:
已抢7337个
抢已抢95475个
抢已抢14940个
抢已抢52730个
抢已抢195932个
抢已抢87512个
抢