如何在href=为“#”的所有元素上显示通知框？

<a href="#" class="notification-link">Click me</a>

<div id="notification" class="notification">
  <span class="close-btn">&times;</span>
  This is a notification message.
</div>

.notification {
  position: fixed;
  top: 50px;
  right: 50px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
  display: none;
}

.close-btn {
  float: right;
  cursor: pointer;
}

.notification-link {
  text-decoration: none;
  color: #333;
}

.notification-link:hover {
  text-decoration: underline;
}

document.addEventListener('DOMContentLoaded', function() {
  var notificationLink = document.querySelector('.notification-link');
  var notification = document.getElementById('notification');
  var closeBtn = document.querySelector('.close-btn');

  notificationLink.addEventListener('click', function(e) {
    e.preventDefault();
    notification.style.display = 'block';
  });

  closeBtn.addEventListener('click', function() {
    notification.style.display = 'none';
  });

  setTimeout(function() {
    notification.style.display = 'none';
  }, 5000);
});