bodyタグの終わりの方に以下を追加する。

٤Ƴ٤Ĥ
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
-
-
|
!
|
-
|
!
!
 
-
|
!
function dispLoading(msg) {
    if( msg == undefined ){
        msg = '';
    }
    var dispMsg = '<div class="loadingMsg">' + msg + '</div>';
    if($('#loading').length == 0){
        $('body').append('<div id="loading">' + dispMsg + '</div>');
    }
}
 
function removeLoading() {
  $('#loading').remove();
}

headタグの終わりの方に以下を追加する。

٤Ƴ٤Ĥ
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 
-
|
|
|
|
|
|
|
|
!
 
-
|
|
|
|
|
!
 
<style type="text/css">
    #loading {
        display: table;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        opacity: 0.8;
    }
 
    #loading .loadingMsg {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        padding-top: 140px;
        background: url('kurukuru.gif') center center no-repeat;
    }
</style>

ajaxの開始時にdispLoading()を呼んで、終了時にremoveLoading()を呼ぶ。
・・・期待通りにならない。
他の要素(フォームの要素?)の裏になっちゃう。zindexなんかを試してもダメでした。
で、別の方法を模索してみました。モーダルダイアログを利用する方法です。

bodyタグの終わりの方に以下を追加する。(headタグの方は前述の通り)

٤Ƴ٤Ĥ
  1
  2
  3
 
 
 
<div class="modal fade" id="edit-modal-kurukuru" tabindex="-1">
    <div id="loading"><div class="loadingMsg">取得中...</div></div>
</div>

ajaxの開始時に$('#edit-modal-kurukuru').modal('show')とし、終了時に$('#edit-modal-kurukuru').modal('hide')とする。
期待通り!
何か問題あるかなぁ。

参考サイト(敬称略)

コメント



Tag: jquery

Today:1 Yesterday:2 Total:282

添付ファイル: filekurukuru.gif 41件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-02-17 (日) 01:37:23 (292d)