2

私はCSSの初心者です。私が抱えている問題は本当に単純です。

<section>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

これは私の HTML コードの一部です。div ブロック内には、複数のファイルをアップロードするのに役立つフィールドといくつかのスクリプトがあります。私がやりたいのは、セクションまたは div 自体の上に灰色の div ブロックのようなものを表示することです。これはスペースを占有し、ファイルのアップロード中に gif 画像を表示します。

問題: css の扱い方がわかりません。コードに追加してやりたいことを実行できるいくつかの css クラスのみを探しています。私はjqueryを修正する方法を知っています。

4

4 に答える 4

0

私があなたを正しく理解していれば、モーダルポップアップのようなものが必要ですが、そのセクション (ページ全体ではなく) のすぐ上に、進行状況の画像を表示し、アップロードフィールドでそれ以上クリックできないようにする必要がありますか? もしそうなら、これを使用してください:

<section>    
    <div id="modal" style="display: none"><img src="..."></div>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

次のように表示します。

document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');

そして、それを再び非表示にします:

document.getElementById('modal').setAttribute('style', 'display: none');
于 2012-06-04T08:52:24.693 に答える
0

EDITED: demo with gif、ここでボタンをクリックするとポップアップが表示され、灰色の背景をクリックするとポップアップが消えます。div ポップアップ内に gif を含め、必要に応じてスタイルを設定します。これにより、中央にローディング gif が表示されます。最初に両方の div に display:none を使用し、次に jquery を使用してそれらを表示できるようにします。

于 2012-06-04T08:39:14.317 に答える
0

配置したい場所に挿入するだけです。

<div class="loading">
  <img src="loading.gif">
</div>
于 2012-06-04T08:25:41.260 に答える
0

このようなhtmlを使用してください

<div class="load">
      <img src="../path">
    </div>

そしてcssは

.load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;}

それはあなたを助けるかもしれません

于 2012-06-04T08:29:40.077 に答える