Question

当表单将数据提交到服务器时，我正在尝试创建一个位于表单上方的throbber。到目前为止，我使用jquery的css函数的方法成功地使表单显示为灰色但我不能在顶部叠加一个throbber /进度轮图像..这是要走的路还是我做错了什么？

这是我在.js外部文件中的示例代码..

(function($) { 

Drupal.behaviors.progress = {
attach: function(context, settings) {

 $(".form-submit").click(function()
  {
    $("#tripbuilder-form").css({'background-color':'white',
                    'opacity': '0.5'
                    });
    $("body").css({
                    'background-image': 'url(ajax-loader.gif)',
                    'background-position': 'center',
                    'z-index': '100'
                    });



  });
  }
};


})(jQuery);

我已尝试过

在图片的网址周围加上引号（双引号和单引号）
我也尝试将background-image语句放在与表单相关的部分而不是正文中

..但都没有运气。我认为它是一个背景属性的事实，因此图像被有效地隐藏 - 在这种情况下，什么是在处理过程中实现进度条图像漂浮在灰色表格上方的效果的首选方法？任何帮助非常感谢..

Answer 1

你可能想尝试创建一个throbber div并将该div放在整个页面上（z-index）并设置throbber。

设置背景图像仍然会将图像置于一切背后，因为它是身体的背景。刚才身体的z指数为100，可以将所有东西都移动起来。

类似的东西：

$(".form-submit").click( function( ) {
    $('<div>').css({
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-image': 'url(ajax-loader.gif)',
        'background-position': 'center',
        'z-index': '100'
    }).appendTo('body');
});

如何使用jquery css将throbber /进度条浮动在灰色表格上？

1 个答案: