弹出队列。消息显示不正确

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">&times;</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>