B
Here's the data in the same window, I think logic is clear, then add what you want.update: the code of course governs. But it's working, the styles, and the order, I think you'll do it yourself.$(document).on('change', '.fofm input:checkbox', function() {
if ($(this).is(':checked')) {
$(".fofm input[type=submit]").removeAttr('disabled');
$('.fofm input[type=hidden].valTrFal').val('valTrFal_true');
} else {
$(".fofm input[type=submit]").attr('disabled', 'disabled');
$('.fofm input[type=hidden].valTrFal').val('valTrFal_disabled');
}
});
//закрытие модального окна
$('.close_modal, .overlay').click(function() {
$('.popup, .popup2, .overlay').css({
'opacity': '0',
'visibility': 'hidden'
});
$('.popup > .fofm textarea').val('');
//сброс всех полей формы обраной связи
$(':input', '.fofm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
$(".fofm input[type=submit]").attr('disabled', 'disabled');
});
//показ модального окна
$('.open_modal').click(function(e) {
e.preventDefault();
$('.popup, .overlay').css({
'opacity': '1',
'visibility': 'visible',
'display': 'block'
});
});
//аякс форма обратной связи
$('.btn__back').click(function() {
$('.popup2').toggle();
$('.popup').toggle();
});
$(".fofm").submit(function(e) {
e.preventDefault();
var name = $('input[name="txtname"]').val();
var email = $('input[name="txtemail"]').val();
var phone = $('input[name="txtphone"]').val();
var target = $('.popup2 .window');
target.html('');
target.append('Имя: ' + name + '<br>');
target.append('Email: ' + email + '<br>');
target.append('Телефо: ' + phone);
$('.popup').toggle();
$('.popup2').toggle();
});input,
textarea {
padding: 5px 8px;
border: 1px solid #84898b;
display: block;
margin-top: 6px;
color: #b1b7ba;
font: 12px/18px Verdana, Arial, sans-serif;
}
input[type="submit"] {
color: #fff;
border: 1px solid #d6942d;
font-size: 14px;
margin-top: 6px;
background: #ee7156;
text-decoration: none;
display: block;
cursor: pointer;
padding: 4px;
height: 30px;
}
input[type="submit"]:disabled {
opacity: .3;
}
body {
font: 12px/18px Verdana, Arial, sans-serif;
width: 100%;
}
.open_modal {
position: absolute;
left: 50%;
}
.open_modal p {
background: #ee7156;
border-radius: 5px;
padding: 2px 44px;
color: #fff;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
margin: 0 0 0 -50%;
display: block;
width: 225px;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.popup,
.popup2 {
display: inline-block;
left: 50%;
//opacity: 0;
position: fixed;
text-align: justify;
top: 50%;
//visibility: hidden;
display: none;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.popup form {
padding: 0 27px 20px;
right: 0;
width: 250px;
background: rgba(255, 255, 255, 0.85);
border-radius: 5px;
border: 1px solid #72bffc;
border-top: 40px solid #72bffc;
}
.popup2 {
display: none
}
.popup2 .window {
padding: 0 27px 27px;
right: 0;
width: 373px;
background: rgba(255, 255, 255, 0.85);
border-radius: 5px;
border: 1px solid #72bffc;
border-top: 40px solid #72bffc;
}
.popup form input {
background: #f0f5f7;
margin-top: 8px;
width: 227px;
}
.popup form input[name="txtname"] {
margin-top: 20px;
}
.popup form textarea {
background: #f0f5f7;
margin-top: 8px;
width: 227px;
height: 100px;
resize: none;
}
.popup form label {
width: 100%;
height: 20px;
display: block;
margin: 8px -2px;
padding: 0;
}
.popup .button,
.popup2 .button{
background: #ee7156;
text-align: center;
text-transform: uppercase;
width: 245px;
}
.popup form input[type="checkbox"] {
width: auto;
margin: 2px;
padding: 2px;
float: left;
}
.popup form h5 {
position: absolute;
top: 10px;
left: 29px;
font-size: 18px;
color: white;
font-weight: normal;
text-transform: uppercase;
margin: 0;
}
.popup .close_modal,
.popup2 .close_modal {
position: absolute;
padding: 1px 9px 4px 9px;
top: -15px;
right: -15px;
cursor: pointer;
color: #fff;
font-family: 'tahoma', sans-serif;
background: #ee7156;
text-align: center;
}
.popup2 h5 {
position: absolute;
top: 10px;
left: 120px;
font-size: 18px;
color: white;
font-weight: normal;
text-transform: uppercase;
margin: 0;
}
.popup2 p {
font-family: verdana;
font-size: 18px;
line-height: 24px;
text-align: center;
}
.popup2 p strong {
font-size: 26px;
line-height: 30px;
font-weight: normal;
display: block;
}
.popup2 hr {
background: #63baff;
height: 1px;
border: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="open_modal">
<p>Не нажимать</p>
</div>
<div class="overlay"></div>
<div class="popup">
<div class="close_modal">x</div>
<form class="fofm" action="">
<h5>Форма обратной связи</h5>
<input type="text" required="" placeholder="Имя" name="txtname">
<input type="email" placeholder="Email" name="txtemail">
<input type="tel" pattern="^((8|+7)[- ]?)?((?\d{3})?[- ]?)?[\d- ]{7,10}$" required="" placeholder="Телефон" name="txtphone">
<label><input type="checkbox">Я не робот</label>
<input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
<input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
</form>
</div>
<div class="popup2">
<div class="close_modal">x</div>
<h5>Результаты</h5>
<div class="window" name="Введенные данные"></div>
<input class="button btn__back" value="Назад">
</div>