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:0 Total:1332
kurukuru.gif
