7

重複の可能性：
モーダルとしてのDiv - javascript

関数呼び出しが完了するまで、Javascript で何らかの方法でページをロックする方法はありますか? 私が念頭に置いているのは、現在のリクエストの処理が完了するまで、マウスオーバーやボタンのクリックなどの他のユーザーアクションを防ぐ半透明の灰色のカバーのようなものです。ただし、ルックアンドフィールは機能ほど重要ではありません。

私はこれを行うものを見つけることができませんでした。この問題に対するほとんどの「解決策」は、実行中の処理が完了するまで他の HTML 要素のロードを待つことだけですが、この特定の状況では、すべてのオプションが既に画面に表示されています。現在のリクエストが完了するまで、ユーザーがページから別のアクションを実行できないようにしたいと考えています。

4

3 に答える 3

13

私はこの種のことを行うために単純なdivものといくつかを使用する傾向があります。javascript

たとえば、ページで、divグレーアウトとして機能する を作成します。

      <div id="blackout" style='background-image:url(someSemiTransparent.png); display:none;"></div>

次に、次のようにスタイルします。

      #blackout {
      width:100%;
      height:100%; /* make sure you have set parents to a height of 100% too*/
      position: absolute;
      left:0; top:0;
      z-index:10 /*just to make sure its on top*/}

次に、プロセスが開始されようとしているときに、(それを表示するために) 呼び出すことができます。

      document.getElementById('blackout').style.display = 'block';

完了したら、次の方法で再び非表示にできます。

      document.getElementById('blackout').style.display = 'none';

表示するときは、 を に設定しoverflowてbodyからhiddenに戻すとauto、ユーザーがスクロールして部分的なブラックアウトのみが表示されるのを防ぐことができます。

今、私は通常のために使用jqueryしますが、上記が正しいshowとhide確信していjavascriptます..

アップデート：

Chad が述べているように、すべてをより整然とした状態に保つには、すべてのスタイル設定を CSS に入れる方がよいでしょう。IE

  #blackout {
     width:100%;
     height:100%; /* make sure you have set parents to a height of 100% too*/
     position: absolute;
     left:0; top:0;
     z-index:10 /*just to make sure its on top*/
     background-image:url(someSemiTransparent.png); 
     display:none;}

からスタイルを削除しDIVます。IE

      <div id="blackout"></div>
于 2012-11-12T20:18:40.833 に答える
6

使う

<div style="position:fixed;
            z-index: 2; /* above everything else */
            top:0; left:0; bottom:0; right:0;
            background:rgba(0,0,0,.5);
"> <!-- possibly some loading-animation and/or explanation --> </div>

処理中に追加/削除したり、表示/非表示にしたりできます。

于 2012-11-12T20:06:57.360 に答える
0

インタラクティブな要素には「無効」属性があり、これを「無効」に設定して、イベントが発生しないようにすることができます。

処理の前に「無効」に配置し、「」に戻して、プロセスの最後に再度有効にすることができます。

jQueryを使用して興味深い要素を簡単に選択し、プロセス中にセレクターの結果をメモリに保持して、プロセス後に要素を再度有効にすることをお勧めします。

それが完了したら、ガラス板のようなきれいな UI 要素を追加して、画面が無効になっていることを強調できます。

于 2012-11-12T20:05:35.207 に答える