Нажмите в любом месте экрана, чтобы скрыть панель уведомлений без Jquery

Question

Я на самом деле работаю над проектом Ionic 3, но это может быть любая среда Javascript для проблемы, с которой я на самом деле сталкиваюсь:

В соответствии с пользовательской панелью уведомлений, появляющейся при нажатии (в правом верхнем углу экрана), вы можете фактически закрыть эту панель уведомлений, щелкая снова по той же кнопке, но UX действительно плох в этом смысле.

Чего я хотел бы ожидать: пользователь может щелкнуть в любом месте экрана, чтобы скрыть панель уведомлений

Я знаю, как это сделать в jquery, но я не хочу использовать его в этом проекте:

notif.html:

  <ion-button (click)="toggleNotifications()">
    <div class="notif-button" id="notif-button"></div>
  </ion-button>

notif.ts (способ jQuery):

$('#notif-button').click(function(e){
  e.stopPropagation();
  $('#hide-notif').toggleClass('show-notif');
});

$('#hide-notif').click(function(e){
  e.stopPropagation();
});

$('body,html').click(function(e){
 $('#hide-notif').removeClass('show-notif');
});

Answer 1

<ion-button (click)="toggleNotifications()">
    <div class="notif-button" id="notif-button"></div>
</ion-button>


<script>
// Get the modal
var modal = document.getElementById('notif-button');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>