Jquery ui 有了jQuery，我如何灰显并禁用一个网页，然后在上面显示某种微调器？

当涉及到web开发和javascript/jQuery编程时，我仍然是相当“绿色”的，因此非常感谢任何帮助。这是我想做的

我想做与jQueryUI对话框相同的事情，它在整个页面上放置一个半透明的图像，并禁止单击下面的任何控件

我想知道如何在顶部放置某种微调器覆盖，以显示网站在后台工作。如果我可以使用一个动画GIF文件，那就好了，但我不确定最好的方法是什么

以下是带有对话框的灰显效果示例： . 我想知道如何在没有对话框的情况下产生这种效果。我没有一个关于微调器行为的好例子

所有的建议，网站推荐，和代码是感激的

编辑：我不是指“微调器控件”。我将尝试通过spinner找到一个我所想的例子

---

编辑：我所说的“微调器”是指加载某种类型的gif，如本网站上的“大指示器”gif：

我总是喜欢使用jQuery BlockUI插件：

---

查看演示，你可能会在那里找到你想要的东西。

一种方法是使用一个默认隐藏的div，并具有将背景颜色设置为灰色（例如666）和透明度设置为0.8的属性

如果要显示，请使用jQuery获取屏幕/浏览器窗口的大小，请设置div的大小，并使用高zindex显示它，使其显示在顶部。您还可以将微调器gif图形（无重复，居中）赋予此div

代码：

#json-overlay {
    background-color: #333;
    opacity: 0.8;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url('ajax-loader.gif');
    background-position: center;
    background-repeat: no-repeat;
}

唯一需要注意的是IE6中的select元素，这些元素将通过div显示，因此您可以使用jQuery bgframe来解决这个问题，或者我过去所做的就是在显示div时隐藏select元素，在隐藏div时再次显示它们，为什么不使用“modal:true”

---

您可以使用类似于jquery代码的代码。传递要留在页面顶部的元素的id：

function startModal(id) {
    $("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
    $("#PopupMask").css('opacity', 0.5);  
    $("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
    $("#"+id).data('savePosition', $("#"+id).css( "position"));
    $("#"+id).css( "z-index" , 11 );
    $("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
    if ($("#PopupMask") == null) return;
    $("#PopupMask").remove();
    $("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
    $("#"+id).css( "position" , $("#"+id).data('savePosition') );
}

功能启动模式（id）{
$（“正文”）。前缀（“”）；
$（“#PopupMask”）.css（'opacity'，0.5）；
$（“#”+id）.data（'saveZindex'，$（“#”+id）.css（“z-index”）；
$（“#”+id）.data（'savePosition'，$（“#”+id）.css（“position”）；
$（“#”+id）.css（“z-index”，11）；
$（“#”+id）.css（“位置”，“固定”）；
}
功能停止模式（id）{
if（$（“#PopupMask”）==null）返回；
$（“#PopupMask”）.remove（）；
$（“#”+id）.css（“z-index”，$（“#”+id）.data（'saveZindex'）；
$（“#”+id）.css（“位置”，$（“#”+id）.data（'savePosition'）；
}

您可以使用简单的div，然后使用ajaxstart和ajaxstop事件

<div id="cover"></div>

$('#cover')
    .hide()
    .ajaxStart(function () {
        $(this).fadeIn(100);
    })
    .ajaxStop(function () {
        $(this).fadeOut(100);
    });

$（“#封面”）
.hide（）
.ajaxStart（函数（）{
美元（本）.fadeIn（100）；
})
.ajaxStop（功能（）{
美元（本）。淡出（100）；
});

我想问的第一个问题是为什么？你为什么要在你的web应用程序中使用这种非标准行为？当人们开始使用jQuery时，我看到他们面临的问题是他们使用了太多不必要的flash，这似乎是一种情况。我想知道如何完成这一切，部分是为了扩展我的知识。另一个原因是，我想实现它，以明确显示发生了什么。我现在有一个小页面（还没有在网上），当点击一个按钮时，它就在那里，没有任何关于正在发生什么的通知，而服务器做它需要做的事情。如果这不是一个合适的方法，你有什么建议来更好地完成我的任务？记住，我仍然想知道如何完成这一切。如果没有其他原因，那么就学习如何使用。在这种情况下，显示一个小型加载程序是合适的。以GitHub为例，它将其按钮的样式更改为“加载…”按钮，其中包含一个微调器；这是一个很好的方法。更常见的是简单地用一个小微调器替换按钮。我使用定制的微调器执行此操作：。但是灰色背景的交互适用于模式窗口，而不是本用例，因为它可能会对最终用户造成不和谐。谢谢。这似乎是处理这个问题的最好方法。我发现解决方案有一个问题。如果“我的页面高度”大于“窗口高度”，则下部未覆盖样式。我怎样才能做到这一点？我正在尝试ajax调用加载图像…+1用于BlockUI建议；它的使用非常简单。谢谢你的提示！这比我在过去3个小时里拼凑的东西简单多了，哈哈，谢谢我喜欢的工具+1是的，我可以确认这在JQuery的新版本中是有效的。如果你不想下载BlockUI，这是最简单的选择。虽然jquery UI不是jquery，但上面有大量代码。不是每个人都想要那是什么？

<div id="cover"></div>

$('#cover')
    .hide()
    .ajaxStart(function () {
        $(this).fadeIn(100);
    })
    .ajaxStop(function () {
        $(this).fadeOut(100);
    });