Question

我想制作一个弹出窗口，一旦点击一个按钮就会出现，一旦用户点击该框，就会消失。

当我点击它之外时，我不确定如何让div消失。

var popbox = document.getElementById("popbox");

document.getElementById("linkbox").onclick = function () {
    popbox.style.display = "block";
};

???.onclick = function () {
    popbox.style.display = "none";
};

Answer 1

这是第二个版本，其中有一个透明的叠加层，如评论中提问者所要求的那样......

window.onload = function(){
	var popup = document.getElementById('popup');
    var overlay = document.getElementById('backgroundOverlay');
    var openButton = document.getElementById('openOverlay');
    document.onclick = function(e){
        if(e.target.id == 'backgroundOverlay'){
            popup.style.display = 'none';
            overlay.style.display = 'none';
        }
        if(e.target === openButton){
         	popup.style.display = 'block';
            overlay.style.display = 'block';
        }
    };
};

#backgroundOverlay{
    background-color:transparent;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
}
#popup{
    background-color:#fff;
    border:1px solid #000;
    width:80vw;
    height:80vh;
    position:absolute;
    margin-left:10vw;
    margin-right:10vw;
    margin-top:10vh;
    margin-bottom:10vh;
    z-index:500;
}

<div id="popup">This is some text.<input type="button" id="theButton" value="This is a button"></div>
    <div id="backgroundOverlay"></div>
    <input type="button" id="openOverlay" value="open popup">

这是第一个版本......

这是一些代码。如果还有其他要添加的内容，请告诉我们：）

事件（e）对象提供对事件信息的访问。 e.target为您提供触发事件的元素。

window.onload = function(){
  var divToHide = document.getElementById('divToHide');
  document.onclick = function(e){
    if(e.target.id !== 'divToHide'){
      //element clicked wasn't the div; hide the div
      divToHide.style.display = 'none';
    }
  };
};

<div id="divToHide">Click outside of this div to hide it.</div>

Answer 2

希望这对您有用

let data {
  offer: {
    comment: 'text',
    price: '50'
  },
  files: [File, File]
}

此代码已经过测试，可以很好地工作，谢谢。

Answer 3

这是我的解决方案。

yourFunc=e=>{
  var popbox = document.getElementById("popbox");
  if(e.target.id !=="popbox"){
    popbox.style.display = "none";
    }else{
    popbox.style.display = "block";
    }
}


document.addEventListener("click",yourFunc)

Answer 4

可以通过onblur事件来完成。

// required for focus
divEl.setAttribute('tabindex', '1');
divEl.onblur = event => {
  // hide only if blur occurred outside divEl, ignore its children
  if (!event.currentTarget.contains(event.relatedTarget)) {
    hide();
  }

  // re-focus, if a child took it
  divEl.focus();    
};
divEl.focus();

P.S。对于IE11，可能需要一个小型黑客event.relatedTarget = event.relatedTarget || document.activeElement;。

Answer 5

这是我在点击外部时用来关闭侧边栏的代码

function openNav() {
    document.getElementById("mySidebar").style.width = "100px";
    document.getElementById("curtain_menu").style.marginLeft = "100px";
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("curtain_menu").style.marginLeft = "0";
}

document.onclick = function (e) {
    if (e.target.id !== 'mySidebar' && e.target.id !== 'btn_frontpage_menu') {
        if (e.target.offsetParent && e.target.offsetParent.id !== 'mySidebar')
            closeNav()
    }
}

.sidebar {
  font-family: sans-serif;
  height: 50%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;
}

.sidebar a,
.dropdown-btn {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1vw !important;
  color: rgb(195, 195, 195);
  display: block;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  border: none;
}

.dropdown-container a {
  color: rgb(174, 174, 174) !important;
}

.sidebar a:hover,
.dropdown-btn:hover,
.dropdown-container a:hover {
  color: green !important;
  /* background-color: #5c5c5c; */
}

.sidebar .closebtn {
  position: absolute;
  top: 12px;
  font-size: 36px !important;
  margin-right: 5px;
  text-align: right;
  right: 20px;
}

.openbtn {
  font-size: 20px !important;
  cursor: pointer;
  background-color: transparent;
  color: black;
  padding: 6px 15px;
  border: none;
  float: left;
}

#main {
  position :absolute;
  width: 100%;
  height: 100%;
  left: 100px
}

<div id="mySidebar" class="sidebar" style="width: 100px;">
    <a href="javascript:void(0)" class="closebtn"
        onclick="closeNav()">×</a>
    <a href="">Home</a>
    <div class="dropdown-container">
        <a href="">Job Management</a>
        <a href="#">Request</a>
        <a href="#">Pending</a>
    </div>
</div>
<div id="curtain_menu">
    <button id="btn_frontpage_menu" class="openbtn" onclick="openNav()">☰</button>
    <div id="datetime"></div>
</div>
<div id="main"> Outside of 'Side Bar' is here
</div>

Answer 6

el.onmouseleave = function(){
  document.body.onclick = function(){
    el.style.display = 'none';
    document.body.onclick = null;
  }
}

Answer 7

好的，这是一个基于jQuery的解决方案，基于在DOM中点击的任何div。

$('div').on('click', function(e){
    var parents = $(e.currentTarget).parents();
    for (var i = 0; i < parents.length; i++) {
        if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') {
            // you are in the popup
        };
    }
    e.stopPropagation();
});

这会查看您当前的元素以及任何父元素，并检查id是否匹配。如果divToHide位于parents（）列表中，则保持弹出窗口打开。

*注意：这需要将您的内容包装在包装div或类似内容中。

点击外部div以隐藏纯JavaScript中的div

7 个答案: