Modal window for contact form
.modal-bg {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
// display: flex;
flex-direction: row;
background-color: rgba(71, 125, 202, .6);
align-content: center;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
&.modal-bg--opened {
display: flex;
}
.modal-container {
width: 30%;
min-width: 320px;
padding: 0;
border: 15px solid #ffffff;
border-radius: 8px;
background-color: #ffffff;
box-shadow: $base-box-shadow;
form {
label,
p,
input,
textarea {
font-weight: normal;
line-height: 1.8;
margin-bottom: 10px;
}
p {
margin: 0;
}
.productname {
textarea {
height: 80px;
}
}
.your-message {
textarea {
height: 120px;
}
}
}
}
&.modal-product,
&.modal-product-cat {
.modal-container {
h6 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
text-align: center;
border-bottom: 3px dotted $black;
}
h5 {
font-size: 18px;
font-weight: bold;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
border-top: 3px dotted $black;
span {
display: block;
}
}
p {
margin: 0;
}
label {
margin-bottom: 0;
}
span.your-choise {
display: none;
}
#your-choise--span {
font-weight: bold;
display: block;
}
label {
margin-bottom: 0;
}
br {
display: none;
}
input[name=choise-price] {
font-weight: bold;
margin-bottom: 0;
padding: 0;
border: 0;
outline: none;
box-shadow: none;
}
input[name='your-name'],
input[name='your-phone'] {
margin-bottom: 4px;
padding: 5px;
color: #000000;
background-color: rgba(204, 204, 204, .24);
}
input[type=submit] {
font-weight: bold;
width: 100%;
margin-bottom: 0;
padding: 4px 0;
text-align: center;
text-transform: uppercase;
}
}
}
.modal-close {
font-size: 60px;
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
transition: $base-transition;
color: #ffffff;
&:hover {
color: lighten($green, 25%);
}
}
}
// Place any jQuery/helper plugins in here.
$(document).ready(function() {
$('.modal-close').on('click', function(e) {
CloseModal()
})
$('.modal-bg').on('click', function(e) {
CloseModal()
})
$('.modal-container').on('click', function(e) {
e.stopPropagation();
})
$('.header-btn__add').on('click', function(e) {
e.stopPropagation();
OpenModal();
$('.modal-bg').addClass('modal-bg--opened').addClass('modal-recall');
})
});
function CloseModal() {
$('.modal-bg').attr('class', '').addClass('modal-bg');
$('body').removeClass('modal-opened');
}
function OpenModal(html) {
$('body').addClass('modal-opened');
}
<div class="modal-bg">
<div class="modal-container">
<?php echo do_shortcode('[contact-form-7 id="134" title="Добавить организацию"]'); ?>
</div><!-- /.modal-container -->
<span class="modal-close"><i class="fa fa-times" aria-hidden="true"></i></span>
</div><!-- /.modal-bg -->