Question

在我的user.php页面中，我有一个名为 PARTICIPATE 的按钮。点击此按钮后，它会使用 Jquery Reveal插件（用于弹出窗口）显示带有注册表单的 POPUP 框。现在我用Jquery插件验证这个表单。验证完成后，我将请求发送到Php suing Jquery / Ajax方法。成功注册后，我通过隐藏 html表单获得响应并在此 POPUP BOX 上显示成功消息。几秒钟后， 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;

Fiddle Here

将Jquery动画框放置到页面中间

1 个答案: