Question

问题：我有一个带有按钮的表单，用jQuery ajax（）从数据中提交（post）。我希望在服务器ajax调用期间将按钮替换为微调器（动画png）。但是这样一个微不足道的任务在css中是不可能正确的。

我尝试过：我在按钮行中放置了按钮和图像。 Ox ajax调用我已将按钮显示设置为无，并将img显示为阻止。但是因为这两个尺寸不同会使整个页面闪烁，打破其他元素的定位等等。

另一个想法是尝试用绝对定位将两个元素放在彼此的顶部。但是，作为CSS的愚蠢是我不能把它放在行的中间。

有没有办法将两个元素放在彼此的顶部，这样我才能控制它们的可见性？请记住，我不能在像素中使用绝对位置，因为这是一个网页，我不知道浏览器会有多宽，图像可以在将来改变，按钮中的文字可以在将来改变，所有这一切事物影响绝对大小。如果我的问题的另一个解决方案会阻止页面上下跳动，那么它也会很棒。

EDIT 链接到小提琴实验之一： https://jsfiddle.net/ofb2qdt8/

.button {
    position: relative;
    margin: auto;
    height: 50px;
    width: 30px;
    background: blue;
    z-index: 1;
    display: block;
}

.spinner {
    position: relative;
    margin: auto;
    height: 30px;
    width: 50px;
    background:red;
    z-index: 2;
}

这会在屏幕下方呈现第二个元素。不在不同的z层。

实验2： https://jsfiddle.net/ofb2qdt8/

.button {
    position: absolute;
    margin: auto;
    height: 50px;
    width: 30px;
    background: blue;
    z-index: 1;
    display: block;
}

.spinner {
    position: absolute;
    margin: auto;
    height: 30px;
    width: 50px;
    background:red;
    z-index: 2;
}

这不是两个元素的中心，它们被推到包含div的顶部。高度较小的元素应居中。

Answer 1

查看此工作演示：https://jsfiddle.net/ofb2qdt8/3/

添加几行jquery并更新css。

使用jquery根据按钮div的位置，宽度，高度定位加载div。

*单击按钮以查看加载div，并尝试将按钮的边距播放到任何像素。

JQUERY

$(document).ready(function(){
    $('.c2').each(function(){
        $(this).css({
            'width':$(this).siblings('.c1').outerWidth(),
            'height':$(this).siblings('.c1').outerHeight(),
            'top':$(this).siblings('.c1').offset().top,
            'left':$(this).siblings('.c1').offset().left
        });
    });
    $('.c2').on('click', function(){
        $(this).hide(0);
    });
});

CSS

.c1 {
    margin:100px auto;
    width:100px;
    text-align:center;
    padding:5px 10px;
    background: blue;
    z-index: 1;
}

.c2 {
    position:fixed;
    text-align:center;
    background:red;
    z-index: 2;
    cursor:pointer;
}

Answer 2

粗糙，准备好和未经测试：

HTML

<div>
    <input type='submit' />
    <img src="spinneyIMage.gif" />
</div>

CSS

div{ text-align: center; }
div img{ display: none; }

的jQuery

$('submit').click(function(e){
    e.preventDefault();
    $(this).hide().next().show();
});

Ajax调用完成后反转上面的jQuery。

Answer 3

由于我找不到可行的解决方案，所以我已经恢复了我最初想到的第一个想法。虽然有点麻烦。

HTML

<div class="row>
    <div id="container-button" class="col-xs-12>
        <button id="button" onclick="button_OnClick(e)">submit form via ajax</button>
        <img src="img/spinner.png" sytle="display: none" />
    </div>
</div>

JS

function btnContact_OnClick() {
    // show the soinner and hide the button
    showSpinner();
    $.ajax(
        {
            type: 'POST',
            url: "someurl.com/target",
            data: $("#form").serialize(),
            dataType: "json",
            complete: function() { hideSpinner();},
            success: onAjaxSuccess,
            error : onAjaxError
        }); 
}

function hideSpinner() {
    $("#spinner").hide();
    $("#button").show();
    // make container height non-fixed and content adjustable again
    $("#container-button").height('auto');
}


function showSpinner() {
    // THis is the trick !!!
    // Make the container fixed height as it was before displaying spinner, so it does not change with content (spinner is not the same height as button
    $("#container-button").height($("#container-button").height());
    $("#button").hide();
    $("#spinner").show();
}

这不是完美的解决方案，但我能做到最好。缺点：

它不干净，你必须使用javasript来修复什么是css布局问题
它仍然会引起一点闪烁
显示微调器时容器的高度取决于按钮，如果微调器太大，这可能会导致剪裁

如何将两个元素放在彼此顶部的中心位置？

3 个答案:

JQUERY

CSS