CODEWITHSUNDEEP
javascripthtmlcss
Balvant Ahir
Balvant Ahir

Reputation: 620

Close this popup when click outside in screen

I want to close this popup when I click on screen too. I wrote some Javascript but it is not working for me. I am very Poor in Javascript so I can't figure out what the problem is.

I have tried solutions from other blogs but can't get them to work.

Here is my code you can check it.

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>

Upvotes: 0

Views: 67

Answers (3)

NyoNor
NyoNor

Reputation: 199

Made some changes to your script... Try that one:

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>

Upvotes: 1

Jake Chasan
Jake Chasan

Reputation: 6550

First, the modal variable is not defined within the scope. I changed this to document.getElementById('popup') to solve the JavaScript error.

Second, to get the hide function to work properly, you can use a querySelector, which makes sure the function is triggered and the code block within the if statement is run only if clicked on the whitespace of the 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>

Upvotes: 2

Lama N
Lama N

Reputation: 3

Try this:

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";
    }
}

Upvotes: 0

Related Questions