js点击按钮显示再点击空白地方隐藏

发布网友

共4个回答

懂视网

本篇文章给大家带来的内容是关于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中使用template模板引擎实现的一个例子（代码）

js实现类似于联想关键词的搜索功能（附代码）

热心网友

达到你所说的效果很简单

设置一个隐藏层，点击按钮的时候改变隐藏层的display属性，将隐藏层显示出来。

再给隐藏层设置一个Hide()点击方法，点击隐藏层再次隐藏。

望采纳！

追问大神可加企鹅详聊吗

追答代码效果不行吗？
二九四二七六九一九
哥们，帮忙采纳一下！谢谢！

热心网友

达到你所说的效果很简单

1
2
3
4
5
6

<input type="button" onclick="Show();" value="显示" />
<div id="ceng" style="position:absolute; width: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7gPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="-highlight">100%</a>; height: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7gPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="-highlight">100%</a>; top: 0; left: 0; display: none;">
<div onclick="<a href="https://www.baidu.com/s?wd=Hide&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7gPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="-highlight">Hide</a>();" style="position:absolute; width: <a href="https://www.baidu.com/s?wd=100%25&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7gPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="-highlight">100%</a>; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);"></div>
<div style="position:relative;margin:auto; width: 100px;height:100px;background-color:white;">
</div>
</div>

1
2
3
4
5
6
7
8

<script type="text/javascript">
function Show() {
document.getElementById("ceng").style.display = "block";
}
function <a href="https://www.baidu.com/s?wd=Hide&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLuHDYujR4rHubPj--PWRs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7gPYpyq8Q1Dvn1bLrHn1PWc4njfdrjm1Pj0" target="_blank" class="-highlight">Hide</a>() {
document.getElementById("ceng").style.display = "none";
}
</script>

设置一个隐藏层，点击按钮的时候改变隐藏层的display属性，将隐藏层显示出来。
再给隐藏层设置一个Hide()点击方法，点击隐藏层再次隐藏。
望采纳！
追问：
大神可加企鹅详聊吗

热心网友

可以参考这个！

document.onclick = function(){

//隐藏层代码

};

div.onclick = function(oEvent){

//取消冒泡

oEvent = oEvent || window.event;

if(document.all){

oEvent.cancelBubble = true;

}else{

oEvent.stopPropagation();

}

};

全部栏目

js点击按钮显示再点击空白地方隐藏