2012-02-05 27 views
1

私は画面に異なる機能があります。 Ajaxコールのドロップダウンボックスがあり、その応答としてjspページが返されます。この応答は私のドロップダウンボックスの下にdivの中に入れています。 これは、このJSPがdiv要素に埋め込まれない限り、画面がアラートボックスやその他のダイアログボックスによってブロックされないようにするためです。 これをどのように達成できますか?JavaScript:Ajaxレスポンスを待っている間に画面全体をブロックする方法

+1

、私はあなたがjQueryのを使用して、この(または前)の質問のいずれかの兆候が表示されない。ここからダウンロードしてください。私は間違っていますか? –

答えて

1

あなたが実際にUIをブロックしたい場合は、単にAJAX要求同期を作ります。

+9

これはページ全体をブロックし、ユーザーは何かがバックグラウンドで起こっていることを知らないでしょう。あなたのajaxコールに5秒かかるとしましょう。ユーザーは何かがバックグラウンドで起こっているという情報を持っているはずです。同期ajaxリクエストを行うことで、あなたのページはちょうど凍結されます。 –

+2

はAlexと完全に同意します。これは非常に危険な解決策です –

+1

ありがとうございます – Charmie

6

blockui jqueryプラグインをhereから使用できます。 ajaxコールを作成する前にblockUIを呼び出し、ajaxコールバックでunblockUIを呼び出します。

2

私はJqueryとJquery UIを使用します。 Jquery UIにはモーダルダイアログが用意されています。このダイアログでは、ユーザーが画面上の別の場所をクリックしないようにする読み込みメッセージを配置できます。

http://jqueryui.com/demos/dialog/#modal

0

divは、Zインデックス、不透明度、カーソルのスタイリングとともに使用できます。私はあなたのアプリケーションを知らないが、ページ全体をブロックすることは、私にとって素晴らしいユーザーエクスペリエンスのようには聞こえません。おそらくあなたはページの影響を受けた領域にのみdivを配置することができます

0

これは、(コンテンツを受け取ると)が設定されるまで、機能をロックするブール値フラグを使用します。そしてこのフラグがセットされたら、さらに進んでください。これらの機能を制御できると仮定します。あなたは、私は多分それは半透明にするdiv要素&を重ね示唆何もクリックからユーザーを防ぐためにしたい場合は、

を与え

3

@linusunis。以下は、& jQueryコードのアニメーションによる画面オーバーレイの表示と画面オーバーレイの削除のCSSです。あなたの電話を& "unblock_screen"にしたときに "block_screen"と呼ぶだけで、新しいdivをページに置いた&データが届きました。これは私の頭の上からちょうど離れているので、エラーを二重にチェックする必要があるかもしれませんが、それは私によく見えます。

これが機能するには、ページにjQueryを含める必要があります。あなたはjQueryの答えの多くを取得しているhttp://code.jquery.com/jquery-1.7.1.min.js

<style type="text/css"> 
.blockDiv { 
    position: absolute: 
    top: 0px; 
    left: 0px; 
    background-color: #FFF; 
    width: 0px; 
    height: 0px; 
    z-index: 10; 
} 
</style> 

<script type="text/javascript" language="javascript"> 

function block_screen() { 
    $('<div id="screenBlock"></div>').appendTo('body'); 
    $('#screenBlock').css({ opacity: 0, width: $(document).width(), height: $(document).height() }); 
    $('#screenBlock').addClass('blockDiv'); 
    $('#screenBlock').animate({opacity: 0.7}, 200); 
} 

function unblock_screen() { 
    $('#screenBlock').animate({opacity: 0}, 200, function() { 
     $('#screenBlock').remove(); 
    }); 
} 

</script> 
関連する問題