Запустить
<!doctype html> <html lang="ru"> <head> <title>Bootstrap 4 - Alerts (сообщения)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/libs/bootstrap-4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid pt-3"> <button type="button" class="btn btn-primary" data-create="message">Создать сообщение</button> </div> <!-- jQuery --> <script src="/examples/libs/jquery/jquery-3.5.1.min.js"></script> <!-- Bootstrap JS --> <script src="/examples/libs/bootstrap-4/js/bootstrap.bundle.js"></script> <script> // добавляем в DOM контейнер для сообщений if (!document.querySelector('.messages')) { const container = document.createElement('div'); container.classList.add('messages'); container.style.cssText = 'position: fixed; top: 15px; right: 15px; width: 250px;'; document.body.appendChild(container); } // получаем контейнер const messages = document.querySelector('.messages'); // при нажатию на кнопку добавляем в контейнер alert document.querySelector('[data-create="message"]').addEventListener('click', () => { const messageText = 'Текст сообщения'; const message = document.createElement('div'); message.className = 'alert alert-primary alert-dismissible fade show'; message.innerHTML = `${messageText}<button type="button" class="close" data-dismiss="alert">×</button>`; messages.appendChild(message); }); </script> </body> </html>