Мне необходимо информировать пользователя, если произошло какое-то событие. Для этого написал что-то вроде генерации модального окна и вставки его в тело страницы.
Метод showMessage
выводит какое-либо сообщение.
Может быть такая ситуация, что вылетело какое-то сообщение (т.е. что-то вызвало showMessage
), пользователь его еще не прочитал, а уже прилетает новое сообщение. В общем нужно организовать очередь сообщение. Т.е., если пользователь закрывает сообщение и очередь не пуста, то сразу вылетает новое сообщение.
Код
window.onload = function() {
setInterval(() => foo(), 3000); // генерация нового сообщения каждые 3 сек
};
cnt = 0;
function foo() {
showMessage('cnt', cnt);
cnt += 1;
}
messageQueue = [];
showMessage.show = false; // флаг того, что сейчас отображается сообщение
function showMessage(caption, message) {
// если показывается сообщение, то поместить новое сообщение в очередь
if (showMessage.show) {
messageQueue.push([caption, message]);
console.log(messageQueue);
return;
}
let html = `
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close" id="close">×</button>
<h2>${caption}</h2>
</div>
<div class="line"></div>
<div class="modal-body">
<p>${message}</p>
</div>
</div>
</div>
`;
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let div_modal = doc.body.firstChild;
document.body.append(div_modal);
let div_content = document.querySelector("div.modal-content");
let button_close = document.querySelector("button#close");
function window_onclick(event) {
if (event.target === div_modal) {
closeDialog();
}
}
window.addEventListener('click', window_onclick, false);
function button_no_onclick(event) {
closeDialog();
}
button_close.addEventListener("click", button_no_onclick, false);
function closeDialog() {
window.removeEventListener('click', window_onclick);
button_close.removeEventListener('click', button_no_onclick);
div_modal.classList.toggle('show-modal');
div_content.classList.toggle('show-content');
// удаляем через 0.4 сек, чтобы успела отработать анимация
setTimeout(function() {
div_modal.remove();
}, 0.4 * 1000);
showMessage.show = false; // сбрасываем флаг отображения сообщения
// если очередь не пуста, то через 0.4 сек показать новое сообщение
// за 0.4 сек старое сообщение закроется
if (messageQueue.length > 0) {
msg = messageQueue.shift();
setTimeout(() => showMessage(msg[0], msg[1]), 0.4 * 1000);
}
}
// тут нужна минимальная задержка, чтобы браузер нормально нарисовал анимацию
// Задержка 4 мс нужна для корректной работы в Firefox (в Chrome и с 1 мс работает)
setTimeout(function() {
div_modal.classList.toggle('show-modal');
div_content.classList.toggle('show-content');
}, 4);
showMessage.show = true; // установить флаг отображения сообщения
}
/*
Modal dialog
*/
/* The Modal (background) */
.modal {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.show-modal {
opacity: 1;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: white;
margin: auto;
/*padding: 5px 0 10px 0;*/
border-radius: 6px;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #333333;
top: -300px;
-webkit-transition: top 0.4s;
-moz-transition: top 0.4s;
-o-transition: top 0.4s;
transition: top 0.4s;
}
.show-content {
top: 0;
}
/* The Close Button */
.close {
color: #cbcbcb;
float: right;
font-size: 28px;
font-weight: bold;
border: 0;
background-color: transparent;
}
.close:hover,
.close:focus {
color: #7f7f7f;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 16px;
}
.modal-body {
padding: 10px 16px;
}
.modal-footer {
padding: 10px 16px;
text-align: right;
}
.modal-footer > button {
width: 62px;
height: 34px;
background-color: inherit;
border: 1px solid #cccccc;
border-radius: 4px;
}
.modal-footer > button:hover {
background-color: #e6e6e6;
cursor: pointer;
}
.line {
width: 100%;
border-bottom: 1px solid #e5e5e5;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button type="button" onclick="showMessage('Header', 'Body')">Show Message</button>
<button type="button" onclick="alert('Заглушка')">Show Confirm Dialog</button>
</body>
</html>
В html и css ничего интересного нет. Вся суть в JavaScript: метод showMessage
.
В целом все работает хорошо.
Но бывает ситуация (рандомно, если пользователь быстро закрывает сообщения из очереди), когда при закрытии сообщения очередь не пуста, вызывается следующее сообщение, на странице меняется фон, а само сообщение не появляется (старое улетело, нового нет).
Выглядит это так
В чем может быть проблема? Куда копать?
P.S.: 0.4 * 1000
- длительность анимации открытия/закрытия модального окна (в сек.)
P.P.S.: в window.onload
добавлена генерация нового сообщения каждые 3 сек
showConfirmDialog
,