Модальные окна в стиле Taplink

Пример: https://tap.one-way.dev/p/modal/

Видеоинструкция: https://www.youtube.com/watch?v=Z1h1PyLjttE

Ссылка для кнопки:

javascript:void(0)

Блочок для секции:

<div class="makeModal hidden">Отправить форму</div>

Кодецкий:

<style>
  .hidden {
  display:none!important;
}
.modal-card-body .page-container {
  max-width: 100% !important;
  width: 100% !important;
}
</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>`;
Array.from(document.querySelectorAll('.makeModal')).map((e) => {

let ID = e.parentElement.getAttribute('block_id'),
    title = e.textContent;

  if (document.querySelector(`[id="${ID}"]`)==null) {
e.closest('.blocks-section').insertAdjacentHTML('afterend',modalComponent);
}
  else {
e.closest('.blocks-section').insertAdjacentElement('afterend', document.querySelector(`[id="${ID}"]`))

}
    e.closest('.blocks-section').previousElementSibling.querySelector('a').onclick=(()=>{
        toggleModal(ID)
    })
    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;
})


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

Для бизнес-тарифа вам понадобится также вставить код в настройки аккаунта, который будет скрывать модалки (без него при переходе на соседнюю страницу у вас будет открыт шаблон модалки без возможности закрытия)

<style>
.hidden {display:none!important;}
</style>

Вставьте его в настройки и он решит вашу проблему

Инструкция по стилизации: https://teletype.in/@onthewaytothesun/ePSTrPKLCn7

Добавление стандартным формам заголовков галочкам и выпадающей строки при выборе пункта "другое" в галочках и выборах: https://teletype.in/@onthewaytothesun/CiPssZw2WJD