ポップアップをページの中央に揃えようとしています。どの画像ボックスをクリックしても、上下にスクロールしなくてもポップアップがページの中央に表示されます
それを達成するのを手伝ってください。テスト リンク サイト : http://www.scs-qa.com/panamera/trading.html
.white_content
{
-moz-border-radius: 5px 5px 5px 5px;
background-color: white;
border: 3px solid #000000;
display: none;
height: auto;
left: 30%;
overflow: auto;
padding: 16px;
position: absolute;
top: 10%;
width: 500px;
z-index: 1002;
border-radius: 15px 15px 15px 15px;
text-align: justify;
font-size: 10pt;
font-family: 'Tahoma' ;
}
HTML
<div class="trading-img-box">
<a href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'">
<img class="trading-img" src="img/trading1.png">
</a>
<h1 class="trading-h1">Furniture</h1>
<p style="height:0; clear:both;" class="trading-p">It 's pleasant to live spec..</p>
</div>
<div id="trading1" class="white_content">
<a style="float:right" href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='none';document.getElementById('body-below-otherpage-small-trading').style.display='block'">Close</a>
<br/><br/>
<img src="img/tradingb1.png" style="margin-top: 5px; margin-left: 25px; margin-right: 5px"><br/><br/>
<strong>Furniture</strong>
<p>some text
</p><br/>
<p>some text
</p>
</div>