通知を指定時間後に自動で閉じる方法【HTML/CSS/JavaScript・サンプルコード付き】

通知

通知を指定時間後に自動で閉じる方法

通知を指定時間後に自動で閉じる方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、表示した通知を一定時間後に自動で閉じるサンプルを作成します。通知を表示したままにせず、利用者へ必要な情報だけを短時間表示したい場合に便利な実装です。

このサンプルコードでは、ボタンをクリックすると通知が表示され、指定した時間が経過すると自動的に閉じます。表示時間はJavaScriptの数値を変更するだけで簡単に調整できるため、数秒で閉じる通知や長めに表示する通知など、用途に応じて柔軟にカスタマイズできます。

自動で閉じる通知は、保存完了、送信完了、コピー完了、ログイン成功、設定変更完了などの場面でよく利用されています。閉じるボタンを押さなくても自動的に消えるため、利用者の操作を妨げずにメッセージを伝えられます。通知UIのカスタマイズ方法を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

指定時間後に閉じる通知

ボタンをクリックすると通知が表示され、3秒後に自動で閉じます。

3秒後に自動で閉じます

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>通知を指定時間後に自動で閉じる方法</title>

  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="notification-auto-close_wrap">

    <div class="notification-auto-close_title">
      指定時間後に閉じる通知
    </div>

    <p class="notification-auto-close_text">
      ボタンをクリックすると通知が表示され、自動で閉じます。
    </p>

    <button
      type="button"
      class="notification-auto-close_button"
      data-notice-open=""
    >
      通知を表示
    </button>

  </div>

  <div
    class="notification-auto-close_notice"
    data-notice-message=""
  >
    通知を表示しました
  </div>

  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに通知表示用のボタンと通知本体を配置し、CSSで通知のデザインを設定し、JavaScriptで指定時間後に自動で閉じる処理を実装します。 

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。「通知を表示」をクリックすると通知が表示され、指定した時間が経過すると自動で閉じます。表示時間を変更したい場合は、JavaScript内の setTimeout() の数値を変更してください。例えば 1000 は1秒、3000 は3秒、5000 は5秒、10000 は10秒です。

コメント