使用jQuery，如何显示灰色并禁用网页，然后在其上方显示某种微调框? [英] With jQuery, how can I gray out and disable a webpage and then show some kind of spinner on top of that?

问题描述

在进行Web开发和javascript/jQuery编程时，我还是很环保"的，因此可以提供任何帮助.这是我想做的.

I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.

1. 我想做的事情与jQuery UI对话框所做的一样，即在整个页面上放置一个半透明的图像，并禁止单击下面的任何控件.

1. I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.

我想知道如何在顶部放置某种微调框，以表明该网站在后台运行.如果我可以使用动画GIF文件就可以了，但是我不确定采用哪种最佳方法.

I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.

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

Here is an example of the grayed-out effect with a dialog box: jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.

感谢所有建议，网站引荐和代码.

All suggestions, website referrals, and code is appreciated.

我的意思不是旋转控件".我将尝试查找微调框正在考虑的示例.

I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.

我所说的旋转器"是指某种加载的gif，例如此网站上的"Indicator Big" gif:

What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/

推荐答案

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

One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.

当您要显示时，使用jQuery来获取屏幕/浏览器窗口的大小，请设置div的大小并以较高的zindex显示它，使其显示在顶部.您还可以为该div提供微调器gif图形(不再重复，并且居中).

When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).

代码:

#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并在隐藏div时再次显示它们

Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div

这篇关于使用jQuery，如何显示灰色并禁用网页，然后在其上方显示某种微调框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！