使用jQuery，我如何将网页变成灰色并禁用它，然后在其上方显示某种旋转图标？

Question

在Web开发和JavaScript / jQuery编程方面，我仍然相当“初学者”，所以感谢任何帮助。这是我想要做的事情。

1. 我想做与jQuery UI对话框相同的事情，它会将半透明图像放在整个页面上，并禁用下面任何控件的点击。

2. 我想知道如何在顶部放置某种旋转图标覆盖层来显示网站正在后台工作。如果我可以使用动画GIF文件，那就很好了，但我不太确定最佳方法是什么。

这是一个具有对话框的灰色效果示例：jQuery UI Example。我想知道如何在对话框之外产生此效果。我没有一个好的旋转图标行为示例。

感谢所有建议、网站引荐和代码。

编辑：我不是指“Spinner控件”。我会尝试找到我所想的Spinner示例。

编辑：我所说的“Spinner”是一种加载gif，例如此网站上的“Indicator Big” gif：http://ajaxload.info/

- Mike Webb

---

我会首先问的问题是为什么？ 为什么您要在Web应用程序中采用这种非标准行为？ 我看到人们开始使用jQuery时遇到的问题是，他们使用了很多不必要的闪光效果，而这似乎可能是这样一种情况。 - Josh Smith

我想知道如何完成所有这些，部分是为了扩展我的知识。另一个原因是我想实现它以明确显示正在发生的事情。我现在有一个小页面（尚未上网），当单击按钮时，服务器在执行所需操作时没有任何通知就会静止不动。如果这不是一个合适的方法，您有什么建议来更好地完成我的任务？ - Mike Webb

请记住，我仍然想知道如何完成所有这些操作。即使没有其他原因，也是为了学习。 - Mike Webb

在这种情况下显示一个小的加载器是合适的。以GitHub为例，它会将按钮的样式更改为带有旋转图标的“正在加载...”按钮；这是一个不错的方法。更常见的做法是用一个小的旋转图标替换按钮。我使用自定义制作的旋转图标来实现这一点：http://static.goalscdn.com/img/goalsspinner.gif。但是，灰色背景的交互适用于模态窗口，而不适用于这种情况，在这种情况下，它很可能会对最终用户产生不良影响。 - Josh Smith

Answer 1

我一直喜欢使用jQuery BlockUI插件：http://malsup.com/jquery/block/

查看演示，您可能会在那里找到您需要的内容。

- WillCodeForCoffee

---

感谢您提供的建议，关于使用BlockUI的点赞我赞同。这个工具非常简单易用，感谢您的提示！ - jah

这比我过去三个小时拼凑的东西简单多了，哈哈，谢谢。 - Thousand

很好的工具，我喜欢它+1。 - soorapadman

Answer 2

一种方法是创建一个默认隐藏的 div，将其背景颜色设置为灰色（例如 #666），透明度设置为 0.8。

当您想要显示时，使用 jQuery 获取屏幕/浏览器窗口的大小，设置您的 div 的大小并以高 z-index 显示它，使其显示在顶部。您还可以将旋转图形 (spinner 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时再次显示它们。

- mikeq

---

谢谢。这似乎是处理这个问题的最佳方式。 - Mike Webb

我发现解决方案存在一个问题。如果我的页面高度大于窗口高度，则下部分不会使用样式进行覆盖。我该如何解决？我正在尝试在ajax调用中加载图像... - karim_fci

Answer 3

为什么不直接使用"modal:true"呢？

    $(function () {
        $("#dialog").dialog($.extend({}, dialogOptions, {
            autoOpen: false,
            width: 500,
            modal: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            }
        }));

        $("#profile_edit").click(function () {
            $("#dialog").dialog("open");
        });

        $("#save_and_close").click(function () {
            $("#dialog").dialog("close");
        });
    });

- mila

---

是的，我可以确认这适用于较新版本的JQuery。如果您不想下载BlockUI，则这是最简单的选择。不过没有旋转图片。 - andy boot

jQuery UI不是jQuery，它是一个庞大的代码集合。 并非每个人都需要它。 - John

dialogOptions是什么？ - Nathan B

Answer 4

你可以使用类似于这样的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') );
}

- Renzo Ciot

Answer 5

你可以使用简单的div，然后监听ajaxstart和ajaxstop事件。

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

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

- Rupesh