0

I am actually working on an Ionic 3 project but it could be any Javascript framework for the issue I am actualy facing :

According to a custom notifification bar appaearing on click (top right of the screen), you can actually close that notif bar clicking again on the same button but the UX is really bad in that way.

What I would like to expect: the user could click anywhere in the screen to hidethat notifications bar

I know how to do that in jquery but I don't want to use it in that project :

notif.html:

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

notif.ts (jQuery way):

$('#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');
});
Emile Cantero
  • 1,943
  • 3
  • 22
  • 47

1 Answers1

3
<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>
Ayush Sahu
  • 268
  • 3
  • 15
  • I still got an issue, when I `console.log(modal);` I have undefined even when I tried this post https://stackoverflow.com/questions/48226868/document-getelementbyid-replacement-in-angular4-typescript?rq=1 – Emile Cantero Jul 05 '18 at 15:05