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>

单击屏幕上的任意位置以隐藏没有Jquery的通知栏

1 个答案: