How to to create popup box which will dissapear after 3 seconds?

As the title says I want to create a popup box in the middle of the screen where will be written “winner” or something like that. This should be activated when a player wins the game. I guess I have to use timeOut function.

Below is a very basic alert box which disappears 3 seconds after the page loads. I used setTimeout to accomplish this.

<!DOCTYPE html>
     .alert {
       width: 200px;
       height: 100px;
       line-height: 100px;
       background-color: red;
       color: white;
       text-align: center;

     .hide {
       display: none;
  <h1>Show alert and hide it 3 seconds later</h1>
  <p>Once this page has loaded, an alert box will display below then disappear 3 seconds later.</p>
    const alertHTML = '<div class="alert">ALERT!!!</div>';
    document.body.insertAdjacentHTML('beforeend', alertHTML);
    setTimeout(() => document.querySelector('.alert').classList.add('hide'), 3000);
1 Like