<div id="notification" role="alert">
  <p>新しいメッセージが届きました</p>
  <button aria-label="閉じる" id="close">
    ✘
  </button>
</div>

#notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f8d7da;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
const notification = document.getElementById("notification");
const closeButton = document.getElementById("close");

const watcher = new CloseWatcher();

watcher.onclose = () => {
  notification.remove();
   watcher.destroy();
};

closeButton.addEventListener("click", () => {
  watcher.requestClose();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.