在 jquery 对话框而不是 html 上显示加载器 div答案

【问题标题】：show loader div on jquery dialog instead of html在 jquery 对话框而不是 html 上显示加载器 div
【发布时间】：2015-01-22 05:36:53
【问题描述】：

我的 jquery 对话框代码有一些输入字段和一个提交

onSubmit 我显示加载器 div

代码sn-p是

$("#loading").show();
$("#loading-overlay").css("position", "fixed");
$("#loading-overlay").css("display", "block");

html 是

<div id="loading-overlay">
</div>
<div id="loading">
    <span>Loading...</span>
</div>

这里该 div 的 id 使用一些 css 将样式应用于该 div，我正在使用模板来应用该样式，

我想用图片展示实际场景

这是我的 JQUERY 对话框

这是我提交后的 JQUERY DIALOG

加载器正在工作，但它应该显示在对话框而不是对话框下方这是我的情况。提前致谢。

【问题讨论】：

您需要将加载程序的z-index 增加到高于对话框的z-index。
z-index 单独不会这样做，但是您可以将 css 设置为绝对并更改左边距吗？这不是确切的方法，但它应该是一个简单的创可贴。
^ 这不会移除覆盖加载器的模态背景。
显示加载器 div 我移动了对话框，但实际对话框将位于中心

标签： javascript jquery html css dialog

【解决方案1】：

对加载器使用 css-position 和 z-index。

您可以通过以下方式实现：

#loading{width:100%;height:100%;
    background-image:url('loader.gif');
    background-position:centre;
    background-repeat:no-repeat;
    position:fixed;
    z-index:999}

【讨论】：

介意你用正确的降价更新你的答案吗？
它有帮助还是需要完整的 css？
我尝试申请$("#loading-overlay").css("z-index", "999");，但它不起作用
你用过width:100%和Height:100%吗？和位置：固定；？
尝试增加 z-index 让我们说：z-index:999999999

【解决方案2】：

将此样式添加到您的 CSS。其中.loader 是加载器元素的类名。

.loader {
    z-index: 9999 !important;
}

【讨论】：

感谢 j_freyre 和 priti，但它对我不起作用
可能是其他一些类覆盖了您的当前样式。尝试为您的 Loader-div 提供内联样式。 style="z-index: 9999 !important;"
感谢#priti，我找到了解决方案并将其更新为答案... :)

【解决方案3】：

这可能会对您有所帮助，将其添加到您的加载器类/ID中，无论如何

 {
  z-index:99999 !important;
 }

【讨论】：

【解决方案4】：

var zi = $("#parent_dialog_name").zIndex();
var lzi;
if (zi > 0) { lzi = zi + 1; }
else { lzi = 0; }
$("#loading").show();
$("#loading-overlay").css("position", "fixed");
$("#loading-overlay").css("display", "block");
$("#loading-overlay").zIndex(lzi);
$("#loading").zIndex(lzi + 1);

我这样做是为了解决我的问题

【讨论】：