Модальное окно при повтором открытии меняет положение?

Question

[King123456]

Всем Здравствуйте
Есть модальное окно при клике открывается по центру экрана,заполняю данные отправляю входит оповещение что сообщение отправлено. Закрываю,заработает timeout по очистке формы ,но когда открываю снова модальное окно меняет положение ,она открывается левом углу. После обновлении страницы открывается по центру. Как можно это исправить?

Мoй код JS:

const forms = document.querySelectorAll('form');
    
    const message = {
        loading:'img/spinner.svg',   
        success:'Спасибо! Мы с вами свяжемся',
        failure:'Что-то пошло не так...'
    };

    forms.forEach(item => {
        bindpostData(item);
    });

    const postData = async(url,data) => {
        const res = await fetch(url, {
            method:"POST",
            headers:{
            'Content-type':'application/json'
        },
        body: data
        });

        return await res.json();
    };

    function bindpostData(form) {
        form.addEventListener('submit',(e) => {
            e.preventDefault();
     
    const statusMessage = document.createElement('img');
        statusMessage.src = message.loading;
        statusMessage.style.cssText = `
            display:block;
            margin:0 auto;
        `;
    form.append(statusMessage);
    
    const formData = new FormData(form);
   
    const json = JSON.stringify(Object.fromEntries(formData.entries()));
   
    postData('http://localhost:3000/requests',json)
        .then(data => data.text())
        .then(data => { 
            console.log(data);
            showThanksModal(message.success);
            statusMessage.remove();
        }).catch(() => {
            showThanksModal(message.failure);
        }).finally(() => {
            form.reset();
        });
    });
}

    function showThanksModal(message) {
        const prevModalDialog = document.querySelector('.modal__dialog');

    prevModalDialog.classList.add('hide');
    openModal();    

    const thanksModal = document.createElement('div');
    thanksModal.classList.add('modal__dialog');
    thanksModal.innerHTML = `
        <div class = "modal__content">
        <button data-close class="modal__close" type="button">
            <svg data-close  class="modal__close-icon">
                <use xlink:href="#close"></use>
            </svg>
        </button>
            <div class="modal__title">${message}</div>
        </div
        `;
        document.querySelector('.modal').append(thanksModal);
        setTimeout( () => {  
            thanksModal.remove(); 
            prevModalDialog.classList.add('show');
            prevModalDialog.classList.remove('hide');
            closeModal('.modal');
        },4000);
    }

мой код HTML

<div class="modal">
     <div class="modal__dialog">
       <div class="modal__content">
        <form action="" method="post">
        <button data-close class="modal__close" type="button">
            <svg data-close  class="modal__close-icon">
                    <use xlink:href="#close"></use>
            </svg>
        </button>
         <h2 class="modal__title">Оставить заявку</h2>
         <h4 class="modal__text">Заполните форму ниже и я свяжусь с вами в ближайшее время!</h4>
        
             <div class="form__group">
                 <input class="input" type="text" name="text" placeholder="Ваше имя и фамилия">
             </div>
             <div class="form__group">
                 <input class="input" type="email" name="email" placeholder="Ваш e-mail">
             </div>
             <div class="form__group">
                 <input class="input" type="tel" name="phone" placeholder="Ваш номер телефона">
             </div>
         
         <ul class="contacts">
            <button  class="btn" type="submit">Оставить заявку</button>
            <a class="contacts__link" href="[e-mail]">[e-mail] </a>
            <a class="contacts__link" href="875648123">8-756-481-23-20 </a>
        </ul>
    </form>
     </div>    
</div>
</div>

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color:rgba(7, 5, 29, 0.9);
    top: 0;
    left: 0;
    z-index: 4;
    display: none;
}

.modal__dialog {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;   
}

.modal__content {
    position: relative;
    background-color: #fff;
    max-width: 550px;
    padding: 30px;
    border-radius: 15px; 
    z-index: 5;    
}

.form__group {
    padding: 10px 0;
}
.modal__close {
    
    background: none;
    color: #ccc;
    border: 0;    
}
.modal__close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.input {
    display: block;
    width: 100%;
    height: 45px;
    padding: 15px 18px;
    
    font-family: inherit;
    color: #333;
    font-size: 15px;
    line-height: 1.1;
    font-weight: 500;
    
    border: 1px solid #ddd;
    border-radius: 5px;
}
.input:focus {
    outline: 0;
    border-color: #ec3482;
    
}
.modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;    
}
.modal__text {
    font-size: 16px;
    font-weight: 500;
}