modal-with-form.html

<!-- start style -->
<style type="text/css">
.alModal {
    width: 90%;
    max-width: 280px;
    height:auto;
    display: none;
    position: fixed;
    z-index: 100;
    font-family: sans-serif;
    background: rgb(255, 255, 255);
    border: 1px solid #fff;
    border-radius: 3px;
    opacity: 0;
    top: 100%;
    left: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.alModalContent {
    padding: 15px 22px;
}

.alModalInput {
    position: relative;
    
    margin: 0 auto;
    margin-top: 10px;
    padding: 12px;
    height: auto;

    line-height: 1;
    border-radius: 3px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
    -webkit-appearance: none;
    width: 100%;
}
.alModalInput:focus,.alModalTextarea:focus{outline:none;}
.alModalTextarea {
    position: relative;
    margin: 0 auto;
    margin-top: 10px;
    padding: 12px;
    height: 100px;
    
    line-height: 1.4;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
    resize: none;
    -webkit-appearance: none;
    
}
.alModalClose {
    cursor: pointer;
    width: 20px;
    display: block;
    text-align: center;
    float: right;
    position: absolute;
    top: -29px;
    right: -26px;
    z-index: 101;
    color: #ffffff;
    font-size: 12px;
    height: 20px;
    line-height: 26px;
    font-family: sans-serif;
}
@media (max-width: 768px){
.alModal .alModalClose {
    right: -3px;
}
}

.alModalClose:before {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 42%;
}
.alModalClose:after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fff;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 42%;
    left: 0%;
}
.alModalClose:hover {color:#ccc;}

.alModal p {
    position: relative;
    display: block;
    text-align: center;
    color: #444;
    margin: 0px;
    font-size: 16px;
    line-height: 1.3;
    padding: 0px 10px;
}
.alModalThank{    
    max-width: 500px;}

.alModal .thank_ico{    
    color: #42AD41;
    padding: 10px 10px 0;
    font-size: 65px;
    display: inline-block;
    line-height: 1;
    border-radius: 50%;
    width: 65px;
    text-align: center;
    height: 65px;
    font-weight: bold;
    vertical-align: middle;
}
.alModal .thank_words{    display: inline-block;
    color: #333;
    padding-left: 15px;
    line-height: 1.4;
    font-size: 17px;
    width: 73%;
    vertical-align: middle;}
.alModalButton {
position: relative;
    display: block;
    margin: 0 auto;
	width: 100%;
    line-height: 1.4;
    font-size: 16px;
    color: white;
    background: #2496D0;
    border-radius: 3px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 10px;
    padding: 9px;
    border-bottom: 3px solid #2388BB;
    -webkit-transition: 0.5s ease top;
    -o-transition: 0.5s ease top;
    transition: 0.5s ease top;
}

.alModalButton:hover {
    background: #43A7DB;
}

.alModalButton:active {
    background: #3894C3;
    border-bottom-color: #3894C3;
    top: 2px;
}

#overlay {
    z-index: 29;
    position: fixed;
    background-color: #000;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}
</style>
<!-- end style -->


<!-- start html block -->

<!-- 
    навешиваем событие спомощью класса js_alModal
    в data-modalуказываем нашу модалку
-->

    <div class="js_alModal" data-modal='js_modal-1'>открыть form</div>
    
<!-- 
    не забываем overlay
-->

    <div id="overlay"></div>


    <div class="alModal js_modal-1">
        <span class="alModalClose js_alModalClose"></span>
        <div class="alModalContent">
            <p>Мы свяжемся с вами в ближайшее время</p>
            <form action="javascript:void(0);" id="alxModalForm1">
                <input required name="name" class="alModalInput" type="text" placeholder="Имя">
                <input required name="email" class="alModalInput" type="email" placeholder="E-mail">
                <input required name="phone" class="alModalInput" type="tel" placeholder="Телефон">
                <textarea required name="question" class='alModalTextarea' placeholder="Ваш вопрос"></textarea>
                <input type="submit" class="alModalButton" name="--" value="Отправить">
            </form>
        </div>
    </div>

    <div class="alModal alModalThank js_modal-3">
        <span class="alModalClose js_alModalClose"></span>
        <div class="alModalContent">
            <div class="thank_ico">✓</div>
            <div class="thank_words">Ваша заявка принята</br>Мы свяжемся с вами в ближайшее время</div> 
        </div>
    </div>

<!-- end html block -->




<!-- start script block -->
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        function showModal(modalName){
            $('#overlay').fadeIn(500,
                function() {
                    var ModalLeft = ($(window).width() - $(modalName).outerWidth()) / 2;
                    var ModalTop = (window.innerHeight - $(modalName).outerHeight()) / 2;
                    setTimeout(function() {
                                $(modalName)
                            .css('display', 'block')
                            .animate({
                                    opacity: 1,
                                    left: ModalLeft + 'px',
                                    top: ModalTop + 'px'
                            }, 300);
                     }, 50)         
                });
        }

        $('.js_alModal').click(function(event) {
            event.preventDefault();
            var modalClass='.'+$(this).attr('data-modal');
            showModal(modalClass);
        })


        $('.js_alModalClose, #overlay').click(function() {
            $('.alModal').animate({opacity: 0}, 200,
                function() {
                    $(this).css({
                        'display': 'none',
                        'top': '100%',
                        'left': '50%'
                    });
                    $('#overlay').fadeOut(400);
                }
            );
        });



        $('#alxModalForm1').submit(function() {
            if (document.forms.alxModalForm1.checkValidity()) {
                 var thisModal=$(this).parents('.alModal');
                form = $('#alxModalForm1').serialize();
                $.ajax({
                    type: "POST",
                    url: window.location.protocol+'//'+window.location.host+"obr.php",
                    data: form,
                    success: function(msg) {
                       thisModal.animate({opacity: 0}, 200,
                            function() {
                                $(this).css({
                                    'display': 'none',
                                    'top': '100%',
                                    'left': '50%'
                                });  
                                }
                            );
                       thisModal.find('.alModalInput').val('');
                       thisModal.find('textarea').val('');
                       showModal('.alModalThank');   
                    }
                });
            }
        });
    });
   $(window).resize(function(event) {
if ($('.alModal').is(':visible')) showModal('.alModal:visible');
});

    </script>
<!-- end script block -->