web-dev-qa-db-ja.com

jqueryオーバーレイローディングバーdiv

つまり、データのテーブルがあり、ajaxを使用してデータを取得しています。データが取得されると、テーブルのデータが消え、小さな小さな読み込み円が表示されます。データを維持し（方法は知っています）、読み込みサークルをテーブルの中央に表示します（必ずしも垂直でなくても、少なくとも水平である必要があります）。また、背景が少し透明になっています。テーブルの表示を少し外に出します（Webページの残りの部分ではありません）。テーブルの上にdivを表示するにはどうすればよいですか？

jquerycssoverlay
18
Matthew

jQueryの.html()メソッドを使用して、テーブルを保持するdivにロードサークルを含む新しいdivを挿入します。次に、cssを使用してスタイルを設定します。多分それを不透明な背景画像に与えます。相対的または絶対的に荷重円を配置します。

あなたが持っていると言う：

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

新しいデータを読み込むとき：

$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');

そしてそれを次のようにスタイルします：

#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}
11
jordanstephens

[ 実際に見る ]

[〜＃〜] html [〜＃〜]

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

[〜＃〜] css [〜＃〜]

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

次に、物事をロードしているとき、あなたはただ言う：

$("#overlay").fadeIn();

そして、あなたが終わったら：

$("#overlay").fadeOut();

注：ロード画像は、要求に応じて垂直方向と水平方向の両方の中央に表示されます。また、要求されたページ全体ではなく、テーブルのみがオーバーレイを持ちます。

72
gblazex

これは私にとってはうまくいきましたが、オーバーレイが左に移動したため、オーバーレイに関しては1つだけのものがあります。

javascriptに1行追加したところ、Chrome、Firefox、Safari（Windows）で完全に動作しました。

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight(),
  left    : $t.position().left // the fix.
});
1
John N

まあ、あなたはcss position：absoluteをローディングサークルに使ってみることができます

0
Puaka