web-dev-qa-db-ja.com

Jquery-ページ全体を無効にする方法

このajaxイベントがあります

function save_response_with_ajax(t){
  var form = $('#edit_'+t);
  var div = $('#loading_'+t);
  $.ajax({
    url: form.attr("action"), 
    type: "POST",    
    data: form.serialize(), 
    cache: false,
    beforeSend: function(){
      form.hide();
      div.show();
    },
    complete: function(){
      div.hide();
      form.show();
    },
    success: function (result) {
    }       
  });
}

そして、すべてが正常に機能しますが、モーダルであるかのように（このように http://jqueryui.com/demos/dialog/#modal ただしダイアログなし）

これを行う方法はありますか？

前もって感謝します

ハビエルQ.

javascriptcssjquery-uijquery
16
JavierQQ23

これを行う方法は、ページ全体を埋めるオーバーレイ要素を持つことです。オーバーレイ要素の背景色が半透明の場合、ページが完全にグレー表示されます： http://jsfiddle.net/SQdP8/1/ 。

高いz-indexそのため、他のすべての要素の上に配置されます。そのようにして、それは正しくレンダリングされ、すべてのイベントをキャッチします（そしてそれらを通過しません）。

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}​
44
pimvdb

あなたが試すことができます

 $("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');

それからただ使う

$（ "＃overlay"）。remove（）;

それを取り除くために。

早くて汚い。

4
JKirchartz

JQuery ajaxStart()を使用して、ドキュメントにDivを追加します。何らかの形式の半透明ドキュメントを使用して、ドキュメントのサイズに設定します。次に、ajaxStop()で削除します。

2
Chris

「beforeSend」機能中にオーバーレイを追加してみてください：

$("body").prepend("<div class=\"overlay\"></div>");

$(".overlay").css({
    "position": "absolute", 
    "width": $(document).width(), 
    "height": $(document).height(),
    "z-index": 99999, 
}).fadeTo(0, 0.8);
2
Ash Clarke

これは私が使用している完全なソリューションです：

セクションは次のとおりです。

  1. オーバーレイ用のCSS。 「固定」は、画面の高さと幅だけでなく、ページコンテンツ全体をカバーするために使用されます。背景色またはgifを使用できます

  2. JQuery Ajax呼び出しの「beforeSend」イベントにアタッチします。オンデマンドでオーバーレイを作成し、表示します。

  3. リクエストが完了すると、DOMからオーバーレイを削除します

CSS：

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}

JavaScript：

$.ajax({
                url: '/*your url*/',
                beforeSend: function () {
                    $('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
                    $("#requestOverlay").show();/*Show overlay*/
                },
                success: function (data) {
                    /*actions on success*/
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    /*actions on error*/
                complete: function () {
                    $("#requestOverlay").remove();/*Remove overlay*/
                }
            });
2
Tejasvi Hegde
_var modal = $('<div>')
  .dialog({ modal: true });

modal.dialog('widget').hide();

setTimeout(function() { modal.dialog('close'); }, 2000); // to close it
_

ここにデモがあります： http://jsbin.com/avoyut/3/edit#javascript,html,live

modal.dialog('close');を呼び出してすべてを終了することを忘れないでください！

このようにして、実際のダイアログモーダルコード、サイズ変更、無効化などの利点を得ることができます。

これが役に立つことを願って

1
ckozl

空白の画面や灰色の画面だけでなく、何かが発生していることをユーザーに示すこともできます。何らかの種類のgifを読み込むことをお勧めします。たとえば、 this を参照してください。

0
Charlie G

今日、IEのすべてのブラウザーで機能するソリューションを探していました。 @pimvdbと@Ash Clarkeのコードを、彼が言及したbackground-color: black; opacity: 0.8; may also work. For IE it will just be completely black.のコメントと一緒に取り、以下の解決策に至りました。

$("#first-div").prepend("<div class=\"overlay-example\"></div>");

var height1 = $("#first-div").height();
var width1 = $("#first-div").width();

$(".overlay-example").css({
    "background-color": "black",
    "z-index": "9999999",
    "position": "absolute",
    "width": width1,
    "height": height1,
    "display": "none"
}).fadeTo(0, 0.0001);

上記のIE8、IE9でテスト済み。 IE7を確認できませんでした。あなたがそれを間違えた場合に備えて、私の解決策を更新して喜んでいるでしょう。 （ソリューションを更新するのにも役立ちます：））

ありがとう@pimvdbと@Ash Clarke

Demo

0
Shubh