Вопрос пока так и не удалось решить - еще раз суть проблемы:
1. В хедере есть ссылка, которая вызывает модальное окно запроса на обратный звонок, использую для этого класс бутстрап MODAL.
2.Нужно сделать так, чтобы когда человек ввел ФИО и телефон текущее окно закрылось и открылось новое модальное, в котором будет сообщение что "Такому то на такой то телефон перезвонят через ...минут".
3. Сделал второе модальное окно, которое вызывается через JS обработчик, написанный для первого окна.
4. По факту сейчас новое модальное окно не появляется, а похоже появляется измененное текущее модальное.
Как сделать нужное? (прошу учесть, что я новичок, который учится верстке макетов, которые потом будут грузиться в Битрикс в качестве шаблонов.
$(document).ready(function(){
var clientData = {
name: '',
phone: ''
};
$('#BackCall').on('keyup', '#Name', function() {
clientData.name = $(this).val()
})
.on('keyup', '#Phone', function() {
clientData.phone = $(this).val()
})
.on('click', '#callback-submit', function(e) {
e.preventDefault(); // чтоб форма в демке не отправлялась
$('.modal-body').html(clientData.name + ', мы вам перезвоним на номер ' + clientData.phone);
})
});
$("#callback-submit").click(function() {
$("#BackCallConf").modal('show');
});
<div class="col-xs-6">
<div class="phone">
<a href="#BackCall" class="btn-callback" data-toggle="modal"><b>8 812 426-11-13</b><br/><span class="span_font">Заказать обратный звонок</span> </a>
<!-- HTML-код модального окна -->
<div id="BackCall" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Заявка на обратный звонок</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
<form role="form">
<fieldset>
<div class="form-group">
<input type="Name" name="Name" id="Name" class="form-control input-lg" placeholder="Имя">
</div>
<div class="form-group">
<input type="Phone" name="Phone" id="Phone" class="form-control input-lg" placeholder="Номер телефона">
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<input id="callback-submit" type="submit" class="btn btn-lg btn-success btn-block" value="Перезвоните мне"data-dismiss="modal">
</div>
</div>
</fieldset>
</form>
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Модальное окно - подтверждение принятия запроса на обратный звонок -->
<div id="BackCallConf" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Заявка на обратный звонок - принята</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
<form role="form">
<fieldset>
<div class="form-group">
<input type="Name" name="Name" id="Name" class="form-control input-lg" placeholder="Имя">
</div>
<div class="form-group">
<input type="Phone" name="Phone" id="Phone" class="form-control input-lg" placeholder="Номер телефона">
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<input id="callback-submit" type="submit" class="btn btn-lg btn-success btn-block" value="Запрос принят"data-dismiss="modal">
</div>
</div>
</fieldset>
</form>
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- строка хедера с меню-->