jquery - jQuery - div をポップアップとして表示しようとすると、ページ レイアウト内に div が表示されます

Question

jQueryで次のようなことをしようとしています:

$("#loading").show();

画面の下部にある#loadingdivは次のとおりです。display:none

<div id="loading" style="display:none; ">
  <p><img src="img/ajax-loader.gif" /> Please Wait</p>
</div>

この関数は物事を表示するだけであることに気付きましたが、その divにはユーザーに待機するように通知するスピナー アイコン.show()があるだけなので、これを画面のコンテンツに重ねて表示するにはどうすればよいでしょうか?.gif

Answer 1

私が行う方法の 1 つは、ダイアログ ボックスを作成することです。

  $("#loading").dialog({
                    height: 140,  
                    width:160,
                    modal: true,
                    resizable : false, 
                    draggable : false,
                    closeOnEscape: false   //So that dont close on escape
                   });
$(".ui-dialog-titlebar").hide();   //No title bar
         $(".ui-dialog").css("padding","0px");  //Remove extra spacing

ajax呼び出しの終了時にそれを削除します。

他の方法：：

1. JQUERY BLOCK UI プラグインを使用する
2. CSS 固定位置の使用