0

非表示のポップアップが表示されたときにページをマスクすることにより、div 要素を使用してモーダル ポップアップ ダイアログの効果を模倣しようとしています。目的の効果を得ることができましたが、このマスキング要素のサイズをロードされたページのサイズに合わせることができないという問題が発生しました。この div の高さを任意の高さに設定すると、ページがコンテンツよりもはるかに長くなることを除いて、すべて正常に機能します。

マスキング要素の高さを設定しようとしているJavaScriptコードは次のとおりです

function sizeModalDiv(){
  var ModalDiv = document.getElementById('ModalDiv'); 
  var FooterDiv = document.getElementById('FooterDiv');

  var FooterTop = FooterDiv.offsetTop
  var PageBottom = FooterTop + FooterDiv.clientHeight;
  ModalDiv.style.height = PageBottom+'px';
}

これがマスキング要素のCSSです

#ModalDiv{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4000px;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}

これが私のHTMLコードの本質です

<body>
  <div id="pagecontent">
    .......
    .......
    .......
  </div>
  <div id="ModalDiv"></div>
</body>

ここで要素のサイズを動的に変更するために提案されたさまざまな方法をいくつか試しましたが、マスキング要素の高さに影響を与えるものはないようです。CSS で設定された高さで常に維持されます。

これのどこが間違っているのですか？私が見逃しているのはかなり単純なものだと確信しており、どんな助けも大歓迎です。

4

2 に答える 2

1

ウィンドウ全体をカバーするには、次の CSS を使用できます。

#ModalDiv{
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}

jsFiddle でのライブ デモ。

于 2013-08-27T06:40:48.313 に答える
0

CSS を設定するhtmlとbody、問題が解決されると思います。また、ページにスクロールするのに十分なコンテンツがある場合は、ポップアップに使用することを忘れposition: fixed;ないでください (ポップアップが画面上に表示されます)。

html{
 height: 100%;
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}

body{
 height: 100%;
 width: 100%;
 margin: 0;
 border: 0;
 padding: 0;
}

#ModalDiv{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color:Black;
  opacity: 0.7;
  visibility: hidden;
}
于 2013-08-27T06:44:22.137 に答える