Есть всплывающая форма, когда нажимаю на кнопку то форма не открывается, ранее убирал 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>
Не правильно работает сам вызов модального окна. И у вас в файле 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Напрямую, через присвоение переменную передать не получитсяC php в js - можно, например, так: let var = '<?= $str ?>', но вот в обратную сторону этот фокус...
Сделал адаптивность пользуясь инструментами хром , то есть отображал сайт как будто на мобильном устройстве Сделал адаптивность для каждого...
Нужно реализовать меню-аккордеонПри клике на блок с заголовком первого уровня должен плавно "выезжать" сверху вниз блок с контентом