web-dev-qa-db-ja.com

jQueryを使用して、Webページをグレーアウトして無効にし、その上にある種のスピナーを表示するにはどうすればよいですか？

Web開発とjavascript/jQueryプログラミングに関しては、私はまだかなり「環境に優しい」ので、助けをいただければ幸いです。これが私がやりたいことです。

  1. JQuery UIダイアログボックスがページ全体に半透明の画像を配置し、その下のコントロールのクリックを無効にする場合と同じことをしたいと思います。

  2. Webサイトがバックグラウンドで動作していることを示すために、何らかのスピナーオーバーレイを上部に配置する方法を知りたいです。アニメーションGIFファイルを使用できる場合は問題ありませんが、これに対する最善のアプローチについてはよくわかりません。

以下は、ダイアログボックスを使用したグレー表示の効果の例です。 jQuery UI Example 。一番上のダイアログボックスなしでこの効果を生成する方法を知りたいです。スピナーの動作の良い例がありません。

すべての提案、ウェブサイトの紹介、コードを歓迎します。

編集： 私は「スピナー制御」を意味しません。私はスピナーで私が考えていることの例を見つけようとします。

編集： 「スピナー」とは、このWebサイトの「Indicator Big」GIFのようなロードGIFです。 http://ajaxload.info/

jquery-uioverlay
27
Mike Webb

それを行う1つの方法は、デフォルトで非表示にされ、背景色をグレー（たとえば、＃666）に設定し、その透明度を0.8などに設定するプロパティを持つdivを持つことです。

表示したい場合は、jQueryを使用して画面/ブラウザウィンドウのサイズを取得し、divのサイズを設定し、高いzindexで表示して、上に表示されるようにします。このdivにスピナー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を非表示にするときに再び

32
mikeq

私はいつもjQuery BlockUIプラグインを使用したいと思います： http://malsup.com/jquery/block/

デモをチェックしてください。おそらくあなたが探しているものを見つけるでしょう。

57
WillCodeForCoffee

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

この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') );
}
1
Renzo Ciot

単純なdivを使用してから、ajaxstartおよびajaxstopイベントを使用できます

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

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