delete

by mrnobody

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<!--Кнопка вызова окна с формой-->
<a href=#popupCenter class="Button" id="ButtonCen">
                                         Заказать
</a>

<!--Всплывающее окно с формой-->
<div id="popupCenter">
    <div class="popupPart">
         <h4 id="popup"> Заказать</h4>

        <form id="OrderCenter">
            <input type="text" class="popupForm" name="name" placeholder="Ваше имя" required>
            <input type="text" class="popupForm" name="email" placeholder="Ваш e-mail">
            <input type="text" class="popupForm" name="phone" placeholder="Ваш телефон" required>
            <textarea class="popupMassage" name="message" placeholder="Укажите, пожалуйста, ваши пожелания. В ближайшее время мы свяжемся с вами для обсуждения всех деталей." required></textarea>
            <input type="submit" class="popupForm" id="ButtonCenter" value="Заказать">
        </form>
    </div>
</div>
<script>
    $("#ButtonCen").fancybox({
        'openEffect': 'elastic',
            'closeEffect': 'elastic',
            'onstart': function() {
            $("#popupCenter").css("display", "block");
        },
            'onClosed': function() {
            $("#popupCenter").css("display", "none");
        }
    });
</script>
<!--Всплывающее окно с описанием и формой-->
<a id="showWindowOne" href="#popupOne">Подробнее</a>

<div id="popupOne">
    <div class="popupPart">
         <h4 id="popup">Заголовок</h4>

        <p id="offerBoxUp">Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание</p>
    </div>
</div>

CSS

form {
    background-color: rgba(246, 59, 47, .5);
}

JavaScript

$(document).ready(function () {
    $('#showWindowOne').on('click', function () {
        var form = $('#OrderCenter');
        form.detach();
        form.appendTo('#popupOne');
    });

});