jQuery/非同期処理中に「Now Loading」を表示させる/方法の変更点

追加された行はこの色です。
削除された行はこの色です。
jQuery/非同期処理中に「Now Loading」を表示させる/方法へ行く。
jQuery/非同期処理中に「Now Loading」を表示させる/方法の差分を削除

#author("2019-02-01T12:48:31+09:00","default:kmf","kmf")
#author("2019-02-17T01:37:23+09:00","default:kmf","kmf")
bodyタグの終わりの方に以下を追加する。
$()で囲った方が良い?
#code(javascript){{
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タグの終わりの方に以下を追加する。
#code(css){{
<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()を呼ぶ。~
&color(blue){・・・期待通りにならない。};~
他の要素（フォームの要素?）の裏になっちゃう。zindexなんかを試してもダメでした。~
で、別の方法を模索してみました。モーダルダイアログを利用する方法です。~

bodyタグの終わりの方に以下を追加する。（headタグの方は前述の通り）
#code(html){{
<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')とする。~
&color(blue){期待通り!};~
何か問題あるかなぁ。
*参考サイト（敬称略） [#o2b3e7b4]
-[[Webllica:https://webllica.com/jquery-now-loading/]]
*コメント [#s359611a]
#comment
----
&tag(jquery);
RIGHT:Today:&counter(today); Yesterday:&counter(yesterday); Total:&counter(total);

bitlabo-r.xsrv.jp