CSS1 worked:
.parentDisable
{
z-index:2000;
width:100%;
height:100%;
display:none;
position:absolute;
left:0;
background: url(/images/btrans.png) repeat;
color: #aaa;
}
#popup
{
width:300px;
height:auto;
position:absolute;
background-color: whitesmoke;
color: #6699ff;
top:40%;
left: 40%;
}
CSS2 Not working as expected:
display:none;
z-index:2000;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
HTML
<div id="pop1" class="parentDisable">
<center>
<div id="popup">
<div id="loading"> </div>
<div id="popupText" align="left"> </div>
<a href="#" onClick="return hidePopup_('pop1')" >
<img style="position: absolute;top: 0;right: 0" alt="close" src="/images/close.png" width="40px" height="40px"/>
</a>
</div>
</center>
</div>
Even though CSS1 produced the desired result, the full HEIGHT was not achieved and I need it to be positioned at the current scroll position rather than at the top or bottom. When clicking on a link, the page scrolls up to the top instead of remaining in place.
UPDATE1:
To prevent the page from scrolling up when clicking on a link: