You can wrap your popup in another element - it's one of the easiest approaches. Let's say, it will have class "tint", and inside it will contain your popup div. And to catch the event on the background, you can add an event listener to the document, and check the click target every time. If the click target is the background (i.e. our "tint"), we just hide the "tint" element, and the event will not fire again, because it has once: true. Otherwise we set the event again. Of course, it's just a simple snippet for demonstration. You can extend it and modify it to your needs.

function documentLoaded(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function popupClickListener(e){
  if (e.target.classList.contains('tint')) {
    document.querySelector('.tint').style.display = 'none';
  } else {
        document.addEventListener('click', popupClickListener, {once: true});
  }
}

documentLoaded(function(){
  document.querySelector('.show-popup').onclick = function(){
    document.querySelector('.tint').style.display = 'block';
    document.addEventListener('click', popupClickListener, {once: true});
  }
});

.tint {
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}
.popup {
  position: relative;
  display: inline-block;
  background: #fff;
  width: calc(100% - 20px);
  max-width: 550px;
  min-height: 130px;
  margin: 50px 10px;
  border-radius: 10px;
  vertical-align: middle;
  overflow: hidden;
  -webkit-transform: translateZ(0px);
}

<div class="tint">
  <div class="popup">popup-content</div>
</div>
<div class="page-content">
  some content<br>
  <button class="show-popup">show popup</button>
</div>

It's quite easy, you wrap your current popover in one extra div; so if you currently had:

<div class="settings-menu">
  ...stuff...
</div>

then you turn that into:

<div class="popover-backplate">
  <div class="settings-menu">
    ...stuff...
  </div>
</div>

Next you add some CSS like:

.popover-backplate {
    position:         fixed;
    width:            100vw;
    height:           100vh;
    background-color: red;
    opacity:          0.5;
}

If that worked then there should be a semi-transparent red overlay over the entire page (everything outside the popover anyway). If that is not the case then you may have to add a z-index property to both settings-menu and/or popover-backplate.

Once the visual part works, all that's left is adding a bit of javascript under popover-backplates onclick-event, which calls your popover_close()-function (whatever it is called).