Как добавить в стандартный блок BF502N кнопку закрытия в TILDA?

Вставляем свою кнопку закрытия в форму BF502N и настраиваем размер и цвет текста, фона и бордюра обводки при наведении и неподвижном состоянии

Время настройки: 1 минута

Генератор кода

Видео

Пример

Проверка кнопки назад

Нажми на кнопку

Проверить

Инструкция

1. Указываем id блока попап формы BF502N;

2. Указываем текст кнопки для закрытия, например "Назад";

3. Выбираем расположение от основной кнопки: слева или справа;

4. Указываем ширину кнопки: 50% или Резиновая;

5. Настраиваем цвета фона, текста и бордюра обводки при наведении и неподвижном состоянии;

6. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Копировать код <!-- Как добавить в стандартный блок BF502N кнопку закрытия в TILDA? -->
<!-- https://nolim.cc/bf502n-button-close -->
<style>  /*кнопки по 50%*/ #rec325142196 .t702 .t-form__submit { display: table; } #rec325142196 .t702 .t-form .t-submit{ width: calc(50% - 10px) !important; display: inline-block; } .wclosee{ width: calc(50% - 10px) !important; text-align: center; white-space: nowrap; background-image: none; cursor: pointer; margin: 0; box-sizing: border-box; outline: none; background: transparent; position: relative; color: #000; border: 1px solid #e2e2e2; background-color: #fff; }   /*резиновые кнопки*/ #rec325142196 .t702 .t-form__submit { display: flex; } #rec325142196 .t702 .t-form .t-submit{ flex-grow: 2; padding-left: 15px !important; padding-right: 15px !important; } .wclosee{ padding-left: 15px !important; padding-right: 15px !important; text-align: center; white-space: nowrap; background-image: none; cursor: pointer; margin: 0; box-sizing: border-box; outline: none; background: transparent; position: relative; color: #000; border: 1px solid #e2e2e2; background-color: #fff; }  #rec325142196 .t702 .t-popup__close { display:none!important; } /*ховер для кнопки*/ .wclosee:hover{ color: #fff; border: 1px solid #efffe2; background-color: #eee; } @media screen and (max-width: 640px) { #rec325142196 .t702 .t-form__submit { display: flex!important; flex-flow: wrap; } #rec325142196 .t702 .t-form .t-submit{ width: 100% !important; display: inline-block; order:1; margin-bottom: 10px; } .wclosee { margin-left: 0% !important; margin-right: 0% !important; width: 100%!important; order: 2; } } </style> <script> function font(){ var idb = '#rec325142196'; var fontF = $(idb + ' .t702 .t-submit').css('font-family'); $('.wclosee').css('font-family','' +fontF+ ''); var fontS = $(idb + ' .t702 .t-submit').css('font-size'); $('.wclosee').css('font-size','' +fontS+ ''); var fontW = $(idb + ' .t702 .t-submit').css('font-weight'); $('.wclosee').css('font-weight','' +fontW+ ''); var borderR = $(idb + ' .t702 .t-submit').css('border-radius'); $('.wclosee').css('border-radius','' +borderR+ ''); var heightH = $(idb + ' .t702 .t-submit').css('height'); $('.wclosee').css('height','' +heightH+ ''); } $(document).ready(function() { setTimeout(function(){ var idb = '#rec325142196'; var b = '<button type="hey" class="wclosee" style="line-height: 100% !important;">Закрыть</button>';  $(b).insertBefore(idb + ' .t702 .t-submit').css({'margin-right': '10px'});   $(b).insertAfter(idb + ' .t702 .t-submit').css({'margin-left': '10px'});  $('.wclosee').click(function(e){ e.preventDefault(); $(idb + ' .t702 .t-popup__close').click(); }); font(); },600); }); </script>