Не отображается всплывающая форма

117
31 мая 2021, 10:10

Есть всплывающая форма, когда нажимаю на кнопку то форма не открывается, ранее убирал hidden, после форма отображалась корректно, но перестала работать кнопка закрыть форму, помогите пожалуста как решить.

jQuery(document).ready(function($) { 
  function calcWindow() { 
    $('#js-calculator-window').toggleClass('hidden') 
    calcRe() 
  } 
 
  function calcRe() { 
    var roomsCount = parseInt($('#rooms-count').val()) 
    var bathRoomsCount = parseInt($('#bathRoomsCount').val()) 
    var priceStandart = roomsCount + bathRoomsCount 
    var priceAdditional = 0 
    var priceTotal = 0 
    $('#js-calculator-window .js-calculator-standart-service').each(function() { 
      if (parseInt($(this).val()) > 0) { 
        priceStandart += parseInt($(this).val()) 
      } 
    }) 
    $('#js-calculator-window .custom-control-input').each(function() { 
      if ($(this).is(':checked')) { 
        if ($('#cleaning-price-' + $(this).data('cleaning')).val() !== null) { 
          priceAdditional += parseInt($('#cleaning-price-' + $(this).data('cleaning')).val()) 
        } 
      } 
    }) 
    priceTotal = parseInt(priceAdditional) + parseInt(priceStandart) 
    $('#js-base-price').html('') 
    $('#js-base-price').html(priceStandart) 
    $('#js-additional-price').html('') 
    $('#js-additional-price').html(priceAdditional) 
    $('#js-final-price').html('') 
    $('#js-final-price').html(priceTotal) 
  } 
  $('.custom-control-input').click(function() { 
    calcRe() 
  }) 
  $('#js-calculator-start').click(function() { 
    calcWindow() 
  }) 
  $('#js-calculator-window .close').click(function() { 
    $('#js-calculator-window').toggleClass('hidden') 
  }) 
 
  function sendOrder() { 
    var phone = $('#js-calculator-phone').val() 
    var name = $('#js-calculator-name').val() 
    var time = $('#js-calculator-time').val() 
    var roomsCount = parseInt($('#rooms-count').val()) 
    var bathRoomsCount = parseInt($('#bathRoomsCount').val()) 
    if (phone.length > 0 && name.length > 0) { 
      var services = [] 
      $('#js-calculator-window .custom-control-input').each(function() { 
        if ($(this).is(':checked')) { 
          if ($('#cleaning-price-' + $(this).data('cleaning')).val() !== null) { 
            services.push($('#cleaning-label-' + $(this).data('cleaning')).text()) 
          } 
        } 
      }) 
      var data = { 
        'phone': phone, 
        'name': name, 
        'services': services, 
        'roomsCount': roomsCount, 
        'bathRoomsCount': bathRoomsCount 
      } 
      $.get('/api/calculator.php', { 
        data: data 
      }, function OnAjaxSuccessd(data) { 
        $('.messengeArea').html('<p>Ваша заявка успешно отправлена!<br>В скором времени мы с вами свяжемся!</p>') 
        $('.calculator-order').hide() 
      }) 
    } 
  } 
  $('#js-send-calculator-data').click(function() { 
    sendOrder() 
  }) 
}); 
jQuery('document').ready(function($) { 
  function modalCallback() { 
    $('#js-modalCallback-overlay').toggleClass('hidden') 
    $('#js-modalCallback-window').toggleClass('hidden') 
  } 
  $('.js-button-modal-callback').click(function() { 
    modalCallback() 
  }) 
  $('#js-modalCallback-window .close').click(function() { 
    modalCallback() 
  }) 
 
  function sendCallback() { 
    var name = $('#js-modalCallback-name').val() 
    var phone = $('#js-modalCallback-phone').val() 
    if (name.length > 0 && phone.length > 0) { 
      $.get('/api/form.php', { 
        'name': name, 
        'phone': phone 
      }, function onAjaxSuccessd(data) { 
        $('#js-modalCallback-body').html('<p>Ваша заявка успешно отправлена!<br>В скором времени мы с Вами свяжемся!') 
      }) 
    } 
  } 
  $('#js-modalCallback-send').click(function() { 
    sendCallback() 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('#js-services-home li').click(function() { 
    $('#js-services-home li').removeClass('active') 
    $(this).addClass('active') 
    $('#services .service-item').addClass('hidden') 
    $('#' + $(this).data('block')).removeClass('hidden') 
  }) 
  jQuery('header img.icon').each(function() { 
    var $img = jQuery(this); 
    var imgID = $img.attr('id'); 
    var imgClass = $img.attr('class'); 
    var imgURL = $img.attr('src'); 
    jQuery.get(imgURL, function(data) { 
      var $svg = jQuery(data).find('svg'); 
      if (typeof imgID !== 'undefined') { 
        $svg = $svg.attr('id', imgID) 
      } 
      if (typeof imgClass !== 'undefined') { 
        $svg = $svg.attr('class', imgClass + ' replaced-svg') 
      } 
      $svg = $svg.removeAttr('xmlns:a'); 
      $img.replaceWith($svg) 
    }, 'xml') 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('.question').click(function() { 
    $(this).toggleClass('active') 
    $('#' + $(this).data('question')).toggleClass('hidden') 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('#js-menu-select li').click(function() { 
    $('#js-menu-select li').removeClass('active') 
    $(this).addClass('active') 
    $('.menu-services .menu-body').addClass('hidden') 
    $('#' + $(this).data('menu')).removeClass('hidden') 
  }) 
 
  function menu() { 
    $('#js-menu-services').toggleClass('hidden') 
  } 
  $('#js-menu-services .close').click(function() { 
    menu() 
  }) 
  $('.js-menu-button').click(function() { 
    menu() 
  }) 
 
  function scrolledMenu() { 
    if ($(window).scrollTop() > 100) { 
      $('.general-menu').addClass('scrolled') 
    } else { 
      $('.general-menu').removeClass('scrolled') 
    } 
  } 
  $(window).scroll(function() { 
    scrolledMenu() 
  }) 
  scrolledMenu() 
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https://fedora66.ru/wp-content/cache/fvm/1557815051/out/header-ed69676f.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="my-5 mx-auto text-center"> 
  <div class="form-group"> 
    <select class="form-control" id="rooms-count"> 
      <option value="1690"> 1-к квартира</option> 
      <option value="2190"> 2-к квартира</option> 
      <option value="2690"> 3-к квартира</option> 
      <option value="3290"> 4-к квартира</option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <select class="form-control" id="bathRoomsCount"> 
      <option value="0">1 санузел</option> 
      <option value="390">2 санузла</option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <button class="btn btn-block btn-red" id="js-calculator-start" data-toggle="modal" data-target="#feedbackFormModal"> Рассчитать стоимость </button> 
  </div> 
</div> 
</div> 
 
 
<div class="modal" id="feedbackFormModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-body"> 
    <div class="calculator-overlay" id="js-calculator-window"> 
      <div class="calculator-window"> 
        <div class="close"></div> 
        <div class="calculator-window-header"> 
          <h2>Онлайн калькулятор клининга</h2> 
          <p>Вы можете добавить дополнительные услуги, отметив необходимые позиции в калькуляторе справа.</p> 
        </div> 
        <div class="messengeArea"> 
          <div class="calculator-window-body"> 
            <h4>По всей квартире</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Моем пол и протираем плинтусы <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Пылесосим ковры и коврики <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем все доступные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем выключатели и дверные ручки <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Чистим зеркала и стеклянные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Собираем и выносим мусор <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-1" data-cleaning="1"> <label class="custom-control-label" for="cleaning-1">Мытье окон - 290р</label> <span class="hidden" id="cleaning-label-1">Мытье окон - 290р</span> 
                  <input 
                    type="hidden" id="cleaning-price-1" class="form-control" value="290"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-2" data-cleaning="2"> <label class="custom-control-label" for="cleaning-2">Уборка балкона - 600р</label> <span class="hidden" id="cleaning-label-2">Уборка балкона - 600р</span>                  <input type="hidden" id="cleaning-price-2" class="form-control" value="600"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-3" data-cleaning="3"> <label class="custom-control-label" for="cleaning-3">Мытье люстры - 500р</label> <span class="hidden" id="cleaning-label-3">Мытье люстры - 500р</span>                  <input type="hidden" id="cleaning-price-3" class="form-control" value="500"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-4" data-cleaning="4"> <label class="custom-control-label" for="cleaning-4">Заберем ключи - 300р</label> <span class="hidden" id="cleaning-label-4">Заберем ключи - 300р</span>                  <input type="hidden" id="cleaning-price-4" class="form-control" value="300"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-5" data-cleaning="5"> <label class="custom-control-label" for="cleaning-5">Доставим ключи - 300р</label> <span class="hidden" id="cleaning-label-5">Доставим ключи - 300р</span>                  <input type="hidden" id="cleaning-price-5" class="form-control" value="300"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-window-body"> 
            <h4>На кухне</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Моем раковину <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем столешницу и кухонный фартук <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Моем снаружи плиту, холодильник и вытяжку <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем фасады шкафов <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-6" data-cleaning="6"> <label class="custom-control-label" for="cleaning-6">Моем посуду - 300р</label> <span class="hidden" id="cleaning-label-6">Моем посуду - 300р</span>                  <input type="hidden" id="cleaning-price-6" class="form-control" value="300"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-7" data-cleaning="7"> <label class="custom-control-label" for="cleaning-7">Почистим холодильник - 450р</label> <span class="hidden" id="cleaning-label-7">Почистим холодильник - 450р</span>                  <input type="hidden" id="cleaning-price-7" class="form-control" value="450"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-8" data-cleaning="8"> <label class="custom-control-label" for="cleaning-8">Помоем духовку - 400р</label> <span class="hidden" id="cleaning-label-8">Помоем духовку - 400р</span>                  <input type="hidden" id="cleaning-price-8" class="form-control" value="400"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-9" data-cleaning="9"> <label class="custom-control-label" for="cleaning-9">Помоем микроволновку - 250р</label> <span class="hidden" id="cleaning-label-9">Помоем микроволновку - 250р</span>                  <input type="hidden" id="cleaning-price-9" class="form-control" value="250"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-10" data-cleaning="10"> <label class="custom-control-label" for="cleaning-10">Приберём кухонные шкафы - 690р</label> <span class="hidden" id="cleaning-label-10">Приберём кухонные шкафы - 690р</span>                  <input type="hidden" id="cleaning-price-10" class="form-control" value="690"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-window-body"> 
            <h4>В ванной</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Чистим унитаз <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Моем ванну, душевую кабину и раковину <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-11" data-cleaning="11"> <label class="custom-control-label" for="cleaning-11">Помоем лоток питомца - 300р</label> <span class="hidden" id="cleaning-label-11">Помоем лоток питомца - 300р</span>                  <input type="hidden" id="cleaning-price-11" class="form-control" value="300"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-footer"> 
            <div class="row"> 
              <div class="col-4"> 
                <p>Базовая стоимость:<br><big id="js-base-price">1690</big>руб</p> 
              </div> 
              <div class="col-4"> 
                <p>За доп. услуги:<br><big id="js-additional-price">0</big>руб</p> 
              </div> 
              <div class="col-4"> 
                <p>Итого:<br><big id="js-final-price">1690</big>руб</p> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="calculator-order"> 
          <div class="row"> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Ваше имя:</p> <input type="text" placeholder="Ваше имя" class="form-control" id="js-calculator-name"></div> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Номер телефона:</p> <input type="text" placeholder="+7(___)___-__-__" class="form-control js-phone" id="js-calculator-phone"></div> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Удобное время для звонка:</p> 
                <select class="form-control" id="js-calculator-time"> 
                  <option value="1">Как можно скорее</option> 
                  <option value="2">09:00-11:00</option> 
                  <option value="3">11:00-13:00</option> 
                  <option value="4">13:00-15:00</option> 
                  <option value="5">15:00-17:00</option> 
                  <option value="6">17:00-19:00</option> 
                </select> 
              </div> 
            </div> 
          </div> 
          <div class="row"> 
            <div class="col-lg-4 col-md-4 col-sm-4"> <button class="btn btn-block btn-send" id="js-send-calculator-data"> Оставить заявку </button></div> 
            <div class="col-lg-8 col-md-8 col-sm-8"> 
              <p>Мы перезвоним Вам в течение часа после отправки заявки. Если вы оставляете заявку не в рабочее время, мы свяжемся в Вами на следующий рабочий день.</p> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
</div> 
</div>

Answer 1

Не правильно работает сам вызов модального окна. И у вас в файле header-ed69676f.min.css и в стилях bootstrap div.modal имеет свойство display:none; - его при клике и надо убирать. Тут вариантов несколько.. Или добавить стиль который будет перебивать сокрытие, к примеру:

.show {
    display:block !important;
} 

И потом уже его использовать -> $('.modal').toggleClass('show');

Или второй вариант - заменить:

$('#js-calculator-window').toggleClass('hidden');

на

$('.modal').css('display','block');...$('.modal').css('display','none')

jQuery(document).ready(function($) { 
  function calcWindow() { 
    $('.modal').css('display','block'); 
    calcRe(); 
  } 
 
  function calcRe() { 
    var roomsCount = parseInt($('#rooms-count').val()) 
    var bathRoomsCount = parseInt($('#bathRoomsCount').val()) 
    var priceStandart = roomsCount + bathRoomsCount 
    var priceAdditional = 0 
    var priceTotal = 0 
    $('#js-calculator-window .js-calculator-standart-service').each(function() { 
      if (parseInt($(this).val()) > 0) { 
        priceStandart += parseInt($(this).val()) 
      } 
    }) 
    $('#js-calculator-window .custom-control-input').each(function() { 
      if ($(this).is(':checked')) { 
        if ($('#cleaning-price-' + $(this).data('cleaning')).val() !== null) { 
          priceAdditional += parseInt($('#cleaning-price-' + $(this).data('cleaning')).val()) 
        } 
      } 
    }) 
    priceTotal = parseInt(priceAdditional) + parseInt(priceStandart) 
    $('#js-base-price').html('') 
    $('#js-base-price').html(priceStandart) 
    $('#js-additional-price').html('') 
    $('#js-additional-price').html(priceAdditional) 
    $('#js-final-price').html('') 
    $('#js-final-price').html(priceTotal) 
  } 
  $('.custom-control-input').click(function() { 
    calcRe() 
  }) 
  $('#js-calculator-start').click(function() { 
    calcWindow() 
  }) 
  $('#js-calculator-window .close').click(function() { 
    $('.modal').css('display','none') 
  }) 
 
  function sendOrder() { 
    var phone = $('#js-calculator-phone').val() 
    var name = $('#js-calculator-name').val() 
    var time = $('#js-calculator-time').val() 
    var roomsCount = parseInt($('#rooms-count').val()) 
    var bathRoomsCount = parseInt($('#bathRoomsCount').val()) 
    if (phone.length > 0 && name.length > 0) { 
      var services = [] 
      $('#js-calculator-window .custom-control-input').each(function() { 
        if ($(this).is(':checked')) { 
          if ($('#cleaning-price-' + $(this).data('cleaning')).val() !== null) { 
            services.push($('#cleaning-label-' + $(this).data('cleaning')).text()) 
          } 
        } 
      }) 
      var data = { 
        'phone': phone, 
        'name': name, 
        'services': services, 
        'roomsCount': roomsCount, 
        'bathRoomsCount': bathRoomsCount 
      } 
      $.get('/api/calculator.php', { 
        data: data 
      }, function OnAjaxSuccessd(data) { 
        $('.messengeArea').html('<p>Ваша заявка успешно отправлена!<br>В скором времени мы с вами свяжемся!</p>') 
        $('.calculator-order').hide() 
      }) 
    } 
  } 
  $('#js-send-calculator-data').click(function() { 
    sendOrder() 
  }) 
}); 
jQuery('document').ready(function($) { 
  function modalCallback() { 
    $('#js-modalCallback-overlay').toggleClass('hidden') 
    $('#js-modalCallback-window').toggleClass('hidden') 
  } 
  $('.js-button-modal-callback').click(function() { 
    modalCallback() 
  }) 
  $('#js-modalCallback-window .close').click(function() { 
    modalCallback() 
  }) 
 
  function sendCallback() { 
    var name = $('#js-modalCallback-name').val() 
    var phone = $('#js-modalCallback-phone').val() 
    if (name.length > 0 && phone.length > 0) { 
      $.get('/api/form.php', { 
        'name': name, 
        'phone': phone 
      }, function onAjaxSuccessd(data) { 
        $('#js-modalCallback-body').html('<p>Ваша заявка успешно отправлена!<br>В скором времени мы с Вами свяжемся!') 
      }) 
    } 
  } 
  $('#js-modalCallback-send').click(function() { 
    sendCallback() 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('#js-services-home li').click(function() { 
    $('#js-services-home li').removeClass('active') 
    $(this).addClass('active') 
    $('#services .service-item').addClass('hidden') 
    $('#' + $(this).data('block')).removeClass('hidden') 
  }) 
  jQuery('header img.icon').each(function() { 
    var $img = jQuery(this); 
    var imgID = $img.attr('id'); 
    var imgClass = $img.attr('class'); 
    var imgURL = $img.attr('src'); 
    jQuery.get(imgURL, function(data) { 
      var $svg = jQuery(data).find('svg'); 
      if (typeof imgID !== 'undefined') { 
        $svg = $svg.attr('id', imgID) 
      } 
      if (typeof imgClass !== 'undefined') { 
        $svg = $svg.attr('class', imgClass + ' replaced-svg') 
      } 
      $svg = $svg.removeAttr('xmlns:a'); 
      $img.replaceWith($svg) 
    }, 'xml') 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('.question').click(function() { 
    $(this).toggleClass('active') 
    $('#' + $(this).data('question')).toggleClass('hidden') 
  }) 
}); 
jQuery('document').ready(function($) { 
  $('#js-menu-select li').click(function() { 
    $('#js-menu-select li').removeClass('active') 
    $(this).addClass('active') 
    $('.menu-services .menu-body').addClass('hidden') 
    $('#' + $(this).data('menu')).removeClass('hidden') 
  }) 
 
  function menu() { 
    $('#js-menu-services').toggleClass('hidden') 
  } 
  $('#js-menu-services .close').click(function() { 
    menu() 
  }) 
  $('.js-menu-button').click(function() { 
    menu() 
  }) 
 
  function scrolledMenu() { 
    if ($(window).scrollTop() > 100) { 
      $('.general-menu').addClass('scrolled') 
    } else { 
      $('.general-menu').removeClass('scrolled') 
    } 
  } 
  $(window).scroll(function() { 
    scrolledMenu() 
  }) 
  scrolledMenu() 
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https://fedora66.ru/wp-content/cache/fvm/1557815051/out/header-ed69676f.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="my-5 mx-auto text-center"> 
  <div class="form-group"> 
    <select class="form-control" id="rooms-count"> 
      <option value="1690"> 1-к квартира</option> 
      <option value="2190"> 2-к квартира</option> 
      <option value="2690"> 3-к квартира</option> 
      <option value="3290"> 4-к квартира</option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <select class="form-control" id="bathRoomsCount"> 
      <option value="0">1 санузел</option> 
      <option value="390">2 санузла</option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <button class="btn btn-block btn-red" id="js-calculator-start" data-toggle="modal" data-target="#feedbackFormModal"> Рассчитать стоимость </button> 
  </div> 
</div> 
 
 
<div class="modal" id="feedbackFormModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-body"> 
    <div class="calculator-overlay" id="js-calculator-window"> 
      <div class="calculator-window"> 
        <div class="close"></div> 
        <div class="calculator-window-header"> 
          <h2>Онлайн калькулятор клининга</h2> 
          <p>Вы можете добавить дополнительные услуги, отметив необходимые позиции в калькуляторе справа.</p> 
        </div> 
        <div class="messengeArea"> 
          <div class="calculator-window-body"> 
            <h4>По всей квартире</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Моем пол и протираем плинтусы <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Пылесосим ковры и коврики <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем все доступные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем выключатели и дверные ручки <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Чистим зеркала и стеклянные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Собираем и выносим мусор <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-1" data-cleaning="1"> <label class="custom-control-label" for="cleaning-1">Мытье окон - 290р</label> <span class="hidden" id="cleaning-label-1">Мытье окон - 290р</span> 
                  <input 
                    type="hidden" id="cleaning-price-1" class="form-control" value="290"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-2" data-cleaning="2"> <label class="custom-control-label" for="cleaning-2">Уборка балкона - 600р</label> <span class="hidden" id="cleaning-label-2">Уборка балкона - 600р</span>                  <input type="hidden" id="cleaning-price-2" class="form-control" value="600"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-3" data-cleaning="3"> <label class="custom-control-label" for="cleaning-3">Мытье люстры - 500р</label> <span class="hidden" id="cleaning-label-3">Мытье люстры - 500р</span>                  <input type="hidden" id="cleaning-price-3" class="form-control" value="500"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-4" data-cleaning="4"> <label class="custom-control-label" for="cleaning-4">Заберем ключи - 300р</label> <span class="hidden" id="cleaning-label-4">Заберем ключи - 300р</span>                  <input type="hidden" id="cleaning-price-4" class="form-control" value="300"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-5" data-cleaning="5"> <label class="custom-control-label" for="cleaning-5">Доставим ключи - 300р</label> <span class="hidden" id="cleaning-label-5">Доставим ключи - 300р</span>                  <input type="hidden" id="cleaning-price-5" class="form-control" value="300"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-window-body"> 
            <h4>На кухне</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Моем раковину <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем столешницу и кухонный фартук <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Моем снаружи плиту, холодильник и вытяжку <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Протираем фасады шкафов <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-6" data-cleaning="6"> <label class="custom-control-label" for="cleaning-6">Моем посуду - 300р</label> <span class="hidden" id="cleaning-label-6">Моем посуду - 300р</span>                  <input type="hidden" id="cleaning-price-6" class="form-control" value="300"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-7" data-cleaning="7"> <label class="custom-control-label" for="cleaning-7">Почистим холодильник - 450р</label> <span class="hidden" id="cleaning-label-7">Почистим холодильник - 450р</span>                  <input type="hidden" id="cleaning-price-7" class="form-control" value="450"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-8" data-cleaning="8"> <label class="custom-control-label" for="cleaning-8">Помоем духовку - 400р</label> <span class="hidden" id="cleaning-label-8">Помоем духовку - 400р</span>                  <input type="hidden" id="cleaning-price-8" class="form-control" value="400"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-9" data-cleaning="9"> <label class="custom-control-label" for="cleaning-9">Помоем микроволновку - 250р</label> <span class="hidden" id="cleaning-label-9">Помоем микроволновку - 250р</span>                  <input type="hidden" id="cleaning-price-9" class="form-control" value="250"></div> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-10" data-cleaning="10"> <label class="custom-control-label" for="cleaning-10">Приберём кухонные шкафы - 690р</label> <span class="hidden" id="cleaning-label-10">Приберём кухонные шкафы - 690р</span>                  <input type="hidden" id="cleaning-price-10" class="form-control" value="690"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-window-body"> 
            <h4>В ванной</h4> 
            <div class="row"> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Входит в стоимость:</h5> 
                <ul class="services-list"> 
                  <li> — Чистим унитаз <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                  <li> — Моем ванну, душевую кабину и раковину <input type="hidden" class="js-calculator-standart-service" value=""></li> 
                </ul> 
              </div> 
              <div class="col-lg-6 col-md-6 col-sm-6"> 
                <h5>Дополнительно:</h5> 
                <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cleaning-11" data-cleaning="11"> <label class="custom-control-label" for="cleaning-11">Помоем лоток питомца - 300р</label> <span class="hidden" id="cleaning-label-11">Помоем лоток питомца - 300р</span>                  <input type="hidden" id="cleaning-price-11" class="form-control" value="300"></div> 
              </div> 
            </div> 
          </div> 
          <div class="calculator-footer"> 
            <div class="row"> 
              <div class="col-4"> 
                <p>Базовая стоимость:<br><big id="js-base-price">1690</big>руб</p> 
              </div> 
              <div class="col-4"> 
                <p>За доп. услуги:<br><big id="js-additional-price">0</big>руб</p> 
              </div> 
              <div class="col-4"> 
                <p>Итого:<br><big id="js-final-price">1690</big>руб</p> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="calculator-order"> 
          <div class="row"> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Ваше имя:</p> <input type="text" placeholder="Ваше имя" class="form-control" id="js-calculator-name"></div> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Номер телефона:</p> <input type="text" placeholder="+7(___)___-__-__" class="form-control js-phone" id="js-calculator-phone"></div> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4"> 
              <div class="form-group"> 
                <p>Удобное время для звонка:</p> 
                <select class="form-control" id="js-calculator-time"> 
                  <option value="1">Как можно скорее</option> 
                  <option value="2">09:00-11:00</option> 
                  <option value="3">11:00-13:00</option> 
                  <option value="4">13:00-15:00</option> 
                  <option value="5">15:00-17:00</option> 
                  <option value="6">17:00-19:00</option> 
                </select> 
              </div> 
            </div> 
          </div> 
          <div class="row"> 
            <div class="col-lg-4 col-md-4 col-sm-4"> <button class="btn btn-block btn-send" id="js-send-calculator-data"> Оставить заявку </button></div> 
            <div class="col-lg-8 col-md-8 col-sm-8"> 
              <p>Мы перезвоним Вам в течение часа после отправки заявки. Если вы оставляете заявку не в рабочее время, мы свяжемся в Вами на следующий рабочий день.</p> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Node.js fastify разработка сайта

Node.js fastify разработка сайта

Доброго времени суток!

97
как переменную iInt перенести в файл PHP

как переменную iInt перенести в файл PHP

Напрямую, через присвоение переменную передать не получитсяC php в js - можно, например, так: let var = '<?= $str ?>', но вот в обратную сторону этот фокус...

94
Как сделать адаптивную вёрстку?

Как сделать адаптивную вёрстку?

Сделал адаптивность пользуясь инструментами хром , то есть отображал сайт как будто на мобильном устройстве Сделал адаптивность для каждого...

115
Меню Аккордеон, CSS, vue

Меню Аккордеон, CSS, vue

Нужно реализовать меню-аккордеонПри клике на блок с заголовком первого уровня должен плавно "выезжать" сверху вниз блок с контентом

153