Вот простой пример реализации выезжающего алерта с использованием HTML, CSS и JavaScript:

HTML


<!DOCTYPE html> 
<html lang="ru"> 
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="styles.css">   
    <title>Выезжающий алерт</title> 
</head> 
<body>    
<div class="alert" id="alert">        
    <span>Это выезжающий алерт!</span>        
    <button onclick="closeAlert()">Закрыть</button>    
</div>    
<button onclick="showAlert()">Показать алерт</button>     
<script src="script.js"></script> 
</body> 
</html>

CSS (styles.css)


body {    
    font-family: Arial, sans-serif; 
}  
.alert {    
    position: fixed;    
    top: 20px;    
    right: -300px; /* Начальное положение скрыто */    
    background-color: #f44336;    
    color: white;    
    padding: 15px;    
    border-radius: 5px;    
    transition: right 0.3s ease; /* Плавный переход */    
    z-index: 1000;
 }  
.alert.show {    
    right: 20px; /* Конечное положение */ 
}

JavaScript (script.js)


function showAlert() {    
    const alertBox = document.getElementById('alert');    
    alertBox.classList.add('show'); 
}  
function closeAlert() {    
    const alertBox = document.getElementById('alert');    
    alertBox.classList.remove('show');
}

Описание

  • HTML: Создаёт выезжающий алерт и кнопку для его отображения.
  • CSS: Задает стили для алерта, включая плавный переход.
  • JavaScript: Управляет отображением алерта, добавляя или удаляя класс show.

Вы можете добавить дополнительные стили и анимации по своему усмотрению.