1

私はjQueryBackbone.jsWebアプリを開発しています。
テーブルエントリのあるテーブルがあります。テーブルの背景は白です。
ユーザーがテーブルエントリを選択すると、モーダルポップアップが表示されます。ポップアップがモーダルモードになったことをユーザーに示すために、以前はjQuery UIの斜めのストライプ（ui-widget-overlay）を使用していました。

しかし、私は別の方法に変更しました。それらの縞模様は、私には「印象的」で「目立たない」ものでした。ここで、テーブルの不透明度を0.5に変更します。私はこれがもっと好きです。

問題は、ポップアップウィンドウにポップアップがあることです。また、最初のポップアップの不透明度を変更して、2番目のポップアップのみが現在機能していることをユーザーに表示すると、テーブルは最初のポップアップを通して光ります。

ポップアップウィンドウ（div）を透明にせずに外観の半分に「暗く」「グレーアウト」させる別の方法はありますか？

4

3 に答える 3

1

hsla で試してください (こちらを参照)。

<style>
#el1 {
    background: red;
     width: 700px;
     height: 700px;
}

#el2 { 
     background-color: hsla(190, 30%, 94%, 0.6); 
     width: 500px;
     height: 500px;
}

#el3 { 
     background: green;
     width: 300px;
     height: 300px;
}
</style>

<div id="el1">
    <div id="el2">
        <div id="el3">

        </div>
    </div>
</div>

私のコードでは、 el1 はホルダーであり、まったく透過的ではありません。次に、最初の子としての el2 は、透過性のために hsla を使用します。含まれているel3は再び透明ではなく、これは機能します。

于 2012-11-14T16:38:29.637 に答える
1

同じサイズの div の上に、不透明度 0.75 の灰色の背景色を持つ別の div を追加します。これはかなりうまくいくはずです。

CSS

.inner {
  position: absolute;
}

.fade {
 background: grey;
 opacity: 0.75;
}

HTML

<div class="outer">
 <div class="inner">content</div>
 <div class="inner fade"></div>
</div>​

このようにして、クロスブラウザー参照に関してはかなり安全です。また、フェード クラスに「id」属性を追加してフェードを制御し、それを消すこともできます。このようにして、div 内部フェードがその上にあるため、div を非アクティブにすることもできます。

于 2012-11-14T16:39:00.387 に答える
0

ページの上にガラス板を置き、z-index を適切に設定して、2 番目のポップアップがその上にあり、他のすべてがその下に隠されるようにすることができます。

#pane {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    opacity:0.5;
    z-index: 999;
}

2 番目のポップアップの z-index がペインよりも高いことを確認してください。問題ありません。

于 2012-11-14T16:38:10.020 に答える