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

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

#1

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.


#2

#3

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

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

     .hide {
       display: none;
     }
   </style>
</head>
<body>
  <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>
  <script>
    const alertHTML = '<div class="alert">ALERT!!!</div>';
    document.body.insertAdjacentHTML('beforeend', alertHTML);
    setTimeout(() => document.querySelector('.alert').classList.add('hide'), 3000);
  </script>
</body>
</html>