Модальное окно авторизации используя iframe

В этом примере мы подружим модальное окно Bootstrap 5.3 и iframe создаваемый JavaScript.

Содержимое iframe:

<p style="padding-top: 1rem; text-align: center;">Вступительная речь</p>
<div class="d-flex gap-3 flex-column">
    <a href="/connect/yandex" class="btn bsb-btn-xl" style=" text-shadow: 1px 1px 25px black; background-color: #dd4b39; color: white;">
        <img src="/yandex.svg" width="16" height="16" style="border-radius: 10px; background-color: white;">
        <span class="ms-2 fs-6">Войти через Яндекс</span>
    </a>
    <a href="/connect/telegram" class="btn bsb-btn-xl" style="text-shadow: 1px 1px 25px black; background-color: #40b3e0; color: white; ">
        <img src="/telegram.svg" width="16" height="16" style="border-radius: 10px; background-color: white;">
        <span class="ms-2 fs-6">Войти через Телеграм</span>
    </a>
    <a href="/connect/google" class="btn bsb-btn-xl btn-danger" style="text-shadow: 1px 1px 25px black;">
        <img src="/google.svg" width="16" height="16" style="border-radius: 10px; background-color: white;">
        <span class="ms-2 fs-6">Войти через Google</span>
    </a>
</div>
<p style="padding-top: 1rem; text-align: center;">Доп. текст.</p>

Модальное окно в которое будем вставлять iframe:

<div class="modal fade" id="commentAuthorization" tabindex="-1" aria-labelledby="commentAuthorizationLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title fs-5" id="commentAuthorizationLabel">Вход</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="commentAuthorizationBody">
                ...
            </div>
        </div>
    </div>
</div>

Код открытия модального окна с и подгрузка iframe:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){
        document.getElementById("commentForm").addEventListener("submit", (event) => {
            event.preventDefault();
            let iframe = document.createElement("iframe");
            iframe.setAttribute('src', "/api/comments/auth?nocache="+Math.round(Math.random() * 1000000000));
            iframe.setAttribute('vspace', "0");
            iframe.setAttribute('hspace', "0");
            iframe.setAttribute('height', "300");
            iframe.setAttribute('scrolling', "no");
            iframe.setAttribute('allowfullscreen', '');
            //iframe.setAttribute('sandbox', 'allow-forms allow-scripts');
            document.getElementById("commentAuthorizationBody").replaceChildren(iframe);
            bootstrap.Modal.getOrCreateInstance(document.getElementById("commentAuthorization")).show();
            // или так:
            // document.getElementById("commentAuthorizationBody").innerHTML = 'любой HTML';
        });
    });
</script>

Готово, теперь при отправке формы будет отображаться модальное окно с вариантами авторизации.