Question

我也想在单击屏幕时关闭此弹出窗口。我写了一些Javascript，但对我不起作用。我的Java语言非常差，所以我不知道是什么问题。

我尝试了其他博客的解决方案，但无法使它们起作用。

这是我的代码，您可以检查它。

function openNav() {
    navMenuStatus = document.getElementById('popup').style.right;
    if (navMenuStatus == '-300px') {
        document.getElementById('popup').style.right = '0px';
    } else {
        document.getElementById('popup').style.right = '-300px';
    }
}
var navMenuStatus = document.getElementById('popup').style.right;
window.onclick = function(event) {
    if (navMenuStatus == '0px') {
        modal.style.right = "-300px";
    }
}

.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

<div class="popup" id="popup" style="right:-300px">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

Answer 1

首先，modal变量未在范围内定义。我将其更改为document.getElementById('popup')以解决JavaScript错误。

第二，要使隐藏功能正常工作，可以使用querySelector，以确保该功能被触发并且if语句中的代码块仅在单击HTML的空白时才运行。

function openNav() {
    navMenuStatus = document.getElementById('popup').style.right;
    if (navMenuStatus == '-300px') {
        document.getElementById('popup').style.right = '0px';
    } else {
        document.getElementById('popup').style.right = '-300px';
    }
}

window.onclick = function(event) {
    var overallTarget = document.querySelector('html')
    if (overallTarget == event.target) {
        document.getElementById('popup').style.right = "-300px";
    }
}

.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

<div class="popup" id="popup" style="right:-300px">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

Answer 2

对脚本进行了一些更改...尝试以下操作：

var navMenuStatus = document.getElementById('popup').style.right;

//click on ANY but not popup
document.querySelector(":not(#popup)").addEventListener("click", function( event ) {
    closeNav();;
}, false);

//click on popup event listenter
document.getElementById("popup").addEventListener("click", function( event ) {
    toggleNav();
    event.stopPropagation();
}, false);

function closeNav() {
  navMenuStatus = document.getElementById('popup').style.right;
  if (navMenuStatus == '0px') {
      document.getElementById('popup').style.right = '-300px';
  }   
}

function toggleNav() {
    navMenuStatus = document.getElementById('popup').style.right;
    //alert(navMenuStatus);
    if (navMenuStatus == '-300px') {
        document.getElementById('popup').style.right = '0px';
    } else {
      closeNav();
    }
}

.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

<div class="popup" id="popup" style="right:-300px">
  <div class="pmenu">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

Answer 3

尝试一下：

function openNav() {
    navMenuStatus = document.getElementById('popup').style.right;
    if (navMenuStatus == '-300px') {
        document.getElementById('popup').style.right = '0px';
    } else {
        document.getElementById('popup').style.right = '-300px';
    }
}
var modal = document.getElementById('popup');
var html = document.querySelector('html');
window.onclick = function(event) {
    if (event.target == html) {
        modal.style.right = "-300px";
    }
}

当在屏幕上单击外部时，关闭此弹出窗口

3 个答案: