0

モーダルを開いたときに、すべてのコンテンツをバックグラウンドでフェードする非常に簡単な方法が必要です。現在の問題は、CSS にサイトの大きさを知らせることです。

「100%」の値を使用すると、Web サイトの高さではなく、ウィンドウの高さのサイズのみが使用されます。

私の問題を説明するために、ここにあるフィドルを作成しました。ボタンをクリックしてから下にスクロールすると、私の意味が表示されます;-)

コードは次のようになります。

<html>
<head>  
<style>
#overlay {
    display: none; 
    position: absolute; 
    left: 222px; 
    top: 5%; 
    padding: 25px; 
    border: 2px solid black;
    background-color: #ffffff;
    width: 455px;
    height: 437px;
    z-index: 100; 
}

#fade {
    display: none; 
    position: absolute; 
    left: 0%;
    top: 0%; 
    background-color: black;
    -moz-opacity: 0.7; 
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 90;
}
</style>
</head>
<body>

<table style="width: 90%; height: 110%; border-style: solid; border-width: 1pt; border-    color: black;">
  <tr>
    <td>blubb</td>
  </tr>
</table>

<button onclick="document.getElementById('overlay').style.display = 'block';    document.getElementById('fade').style.display = 'block'; ">show modal</button>

<div id="overlay">
  Here is some content for the Div Overlay!<br />
  Lorem Ipsum<br />
  <button onclick="document.getElementById('overlay').style.display ='none'; document.getElementById('fade').style.display = 'none'; ">hide modal</button>
</div>

<div id="fade"></div>

</body>
</html>

この質問について少し詳しく説明すると、現在のビューの中心にオーバーレイを配置する方法はありますか? メインコンテンツが表示されているため、iframeにモーダルを表示しています。ユーザーが iframe でスクロールできないようにする方法は知っていますが、固定パーセンテージまたは固定ピクセル数ではなく、ユーザーが見ている場所にモーダルを配置するにはどうすればよいですか?

4

1 に答える 1

1

背景をロックし、オーバーレイが画面からはみ出さないようにするには、その位置を固定に設定します。背景はオーバーレイするためにまだ後ろにスクロールされますが、グレー表示され、選択できません。

同様に、 position: fixed; を使用できます。モーダルが表示画面の中央に留まるようにします。位置: 固定; 表示されている画面に関連し、ページの残りの流れの影響を受けずに要素を操作できます。高さ: 100%; このシナリオでは、ページの場所に関係なく、常に表示ウィンドウの 100% を意味します。

于 2013-08-12T16:31:46.113 に答える