MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. トースト通知

トースト通知

JavaScript
2024.05.24

トースト通知は、画面上に一時的に表示されるメッセージボックスです。

トースト通知
<!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="./main.css" />
  </head>
  <body>
    <p>トースト通知は3秒後にフェードアウトして自動的に削除されます。</p>
    <div id="toast_wrapper">
      <button id="show_toast">トーストを表示</button>
      <div id="toast_container"></div>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  // トースト表示ボタンのクリックイベントハンドラ
  document.getElementById("show_toast").addEventListener("click", function () {
    showToast("これはトースト通知です！");
  });
});

// ページの読み込みが完了
document.addEventListener('DOMContentLoaded', function() {
    // トースト表示ボタンのクリックイベントハンドラ
    document.getElementById('show_toast').addEventListener('click', function() {
        showToast('これはトースト通知です！');
    });
});

// トーストを表示する関数
function showToast(message) {
    const toastContainer = document.getElementById('toast_container');
    const toast = document.createElement('div');
    
    toast.className = 'toast';
    toast.innerText = message;
    
    toastContainer.appendChild(toast);
    
    // トーストを3秒後にフェードアウトして削除
    setTimeout(() => {
        toast.classList.add('fade-out');
        toast.addEventListener('transitionend', () => toast.remove());
    }, 3000);
}
#toast_wrapper {
    border: 3px solid #000;
    width: 100%;
    height: 500px;
    position: relative;
    background-color: #f9f9f9;
    padding: 20px;
    box-sizing: border-box;
}

#toast_container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.toast {
    background-color: #333;
    color: #fff;
    padding: 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.toast.fade-out {
    opacity: 0;
}

#show_toast {
    padding: 10px 20px;
    border: 2px solid #000;
    background-color: #eee;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}
出力結果

トースト通知は3秒後にフェードアウトして自動的に削除されます。

JavaScript