使用jQuery,我如何灰显和禁用网页,然后在其上显示某种微调器？

Question

当涉及到web开发和javascript/jQuery编程时,我仍然非常"绿色",所以任何帮助都表示赞赏.这就是我想要做的.

1. 我想做一个jQuery UI对话框所做的事情,它将半透明图像放在整个页面上,并禁用单击下面的任何控件.

2. 我想知道如何在顶部放置某种微调器覆盖以显示该网站在后台运行.如果我可以使用一个很好的动画GIF文件,但我不太确定最好的方法.

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

所有建议,网站推荐和代码表示赞赏.

编辑:我不是指"旋转控制".我将尝试通过微调器找到我想到的一个例子.

编辑:我的意思是"旋转器"是一个加载的GIF,如本网站上的"指标大"GIF:http://ajaxload.info/

Answer 1

我总是喜欢使用jQuery BlockUI插件:http://malsup.com/jquery/block/

看看演示,你可能会找到你正在寻找的东西.

Answer 2

一种方法是使用默认隐藏的div,并具有将背景颜色设置为灰色(例如#666)并将其透明度设置为0.8的属性.

当您想显示使用jQuery来获取屏幕/浏览器窗口的大小时,设置div的大小并使用高zindex显示它,因此它显示在顶部.你也可以给这个div你的spinner gif图形(不重复,居中).

码:

#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中的选择元素,因为这些元素将通过div显示,所以你可以使用jQuery bgframe来解决这个问题,或者我过去所做的只是在显示div并显示时隐藏选择元素他们在隐藏你的div时再次出现

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");
        });
    });