Модальные окна с назначением на любую ссылку

Видео:

Код:

<style>
      .hidden {
    display:none!important;
}
    .modal-card-body .page-container {
    max - width: 100% !important;
    width: 100% !important;
}
.modal .btn-link, .modal .btn-link:active, .modal .btn-link:hover, .modal .btn-link:link, .modal .btn-link:visited {
    width: 100%;
    background: var(--block-link-background);
    text-decoration: none!important;
    border-width: var(--block-link-border-width);
    border-color: black!important;
    border-style: solid;
    color: black!important;
    border-radius: var(--block-link-border-radius);
    position: relative;
    height: auto!important;
    white-space: normal;
    min-height: 60px;
    padding: calc(10px - var(--block-link-border-width-offset));
    backdrop-filter: var(--theme-link-backdrop-filter);
    -webkit-backdrop-filter: var(--theme-link-backdrop-filter);
    display: flex!important;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--block-link-shadow-params) var(--block-link-shadow-color);
}
</style>
<script>
let modalComponent = `<div tabindex="-1" class="modal hidden">
  <div class="modal-background"></div>
  <div class="animation-content">
  <div class="modal-card is-choosing-form is-block-null" can-cancel="outside">
    <header class="modal-card-head">
      <p class="modal-card-title"></p>
      <button class="modal-close is-large" onclick="this.closest('.modal').classList.remove('is-active');this.closest('.modal').classList.add('hidden');"></button></header>
    <section class="modal-card-body">
    </section>
    <footer class="modal-card-foot"></footer>
    </div></div></div>`;

    let ID=0;
    Array.from(document.querySelectorAll('.makeModal')).map((e) => {

        ID++
        let title = e.textContent;

        if (document.querySelector(`[id="${ID}"]`)==null) {
            e.closest('.blocks-section').insertAdjacentHTML('afterend',modalComponent);
            e.closest('.blocks-section').nextElementSibling.querySelector('.modal-card-body').append(e.closest('.blocks-section'));
            e.closest('.modal').setAttribute('id',ID);
            document.getElementById(ID).querySelector('.modal-card-title').textContent = title;
        }
        else {
            e.closest('.blocks-section').insertAdjacentElement('afterend', document.querySelector(`[id="${ID}"]`))

        }

    })


function toggleModal(e) {
    document.getElementById(e).classList.add('is-active');
    document.getElementById(e).classList.remove('hidden')
}
</script>

Код для вставки в секции

<div class="makeModal hidden">Подробнее
</div>

Код для ссылок

javascript:toggleModal(1)