將Jquery動畫框置於頁面中間

Question

在我的user.php頁面中，有一個名為PARTICIPATE的按鈕。 單擊此按鈕后，將顯示一個彈出框，其中包含使用Jquery Reveal插件的注冊表單（用於彈出窗口） 。 現在，我使用Jquery Plugin驗證此表單。 驗證完成后，我使用Jquery / Ajax方法將請求發送給Php。 成功注冊后，我得到了響應，並通過隱藏 html表單在此彈出框上顯示了成功消息。 幾秒鍾后， POPUP框將消失。

現在一切正常，但是帶有成功消息的POPUP BOX現在正好顯示在窗口頂部。 我想在中間或更低的位置顯示它。 你能告訴我我該怎么做嗎？

我的代碼如下：（這是使彈出框頂部動畫的功能）

<script>
function scrollToElement(selector, callback){
    var animation = {scrollTop: $(selector).offset().top};
    $('html,body').animate(animation, 'slow', 'swing', function() {
        if (typeof callback == 'function') {
            callback();
        }
        callback = null;
    });
}
</script>

這是驗證表單的代碼，我在調用scrollToElement方法：

<script>
$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#campaign").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', true); 
            },
            success: function(response) {
            $('#formError').html(response);
            $(form).hide();
            //return false;

            scrollToElement('#myModal2');

            setTimeout(function() {
            $('input[type=submit]').attr('disabled', false); 
            location.reload();
            }, 5000 );  


            }            
        });
    },

        rules: {
            phone: "required",
            postal: "required",
            suburb: "required",
            state: "required",
            pcode: "required",      
            terms : "required",
            terms1 : "required",                

            purpose: {
                required: true,
                maxlength: 150
                },
            workforce: {
                required: true, 
                maxlength : 150
                },
            plan_implement : {
                required: true, 
                maxlength : 150
                },                      
        },
        messages: {
            terms : "Required",
            terms1 : "Required",

            phone : "Required",
            postal: "Required",
            suburb: "Required",
            state: "Required",
            pcode: "Required",
            purpose: {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },
            workforce :  {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },
            plan_implement :  {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },

        }
    });


});
</script>

HTML格式

<div id="myModal2" class="reveal-modal3">
//my html form....
</div>

Answer 1

您可以使用css calc（）命令！ 例如，這僅在高度和寬度固定的情況下有效

        height:300px;
        width:100px;
        position:absolute;
        left:calc(50% - 50px);  //the 50px is half your width
        top:calc(50% - 150px);  //the 150px is half your height
        background-color:blue;

小提琴在這里