本篇文章给大家带来的内容是关于js如何实现点击空白处就可以隐藏的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象,都是一些工作中比较常用的知识点。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <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> </head> <body> <a href="javascript:;" id="login">注册</a> <a href="javascript:;">登录</a> <p id="mask"></p> <p id="show"></p> </body> </html> <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>
相关推荐:
以上就是js如何实现点击空白处就可以隐藏的效果(代码)的详细内容,更多请关注php中文网其它相关文章!
已抢187141个
抢已抢67526个
抢已抢353834个
抢已抢668601个
抢已抢124020个
抢已抢26315个
抢