Help needed with JavaScript & CSS pop-over

Hi - Not much of a Javascipt guy so I could really use some help.

I have a script that executes when a user hits a button. It's fades the background and displays a box that give a user a message.

The problem I'm having is this. I have a page with a form on it. The form is long so you have to scoll down to hit the button. When the user clicks the button you don't see the fade or the pop-up becuase it's at the top of the page. If you scoll up you can see it, however I need the fade and popup to appear right where the scroll position is.

Can anyone help? I attached my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Test</title>
		<style>
		
			.white_content {
				display: none;
				position: absolute;
				top: 25%;
				left: 25%;
				width: 50%;
				height: 50%;
				padding: 16px;
				border: 16px solid orange;
				background-color: white;
				z-index:1002;
				overflow: auto;
			}
			
			
			.black_overlay{
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index:1001;
				-moz-opacity: 0.8;
				opacity:.50;
				filter: alpha(opacity=80);
			}
	</style>
	<script type="text/javascript">
	function showProcessing(fadeid,boxid){
   		document.getElementById(boxid).style.display='block';
   		document.getElementById(fadeid).style.display='block';
	}
	</script>
	</head>
	<body>
     	<input type="submit" name="button" value="Place Order" onClick="showProcessing('fade','processing');"/> 

	<DIV id="processing" class="white_content">
 		 <DIV class="processingComments">
			<p>Your order is being processed. Please wait.<a href="/"></a></p>
		</DIV>
	</DIV>
	<DIV id="fade" class="black_overlay"></DIV>
	</body>
</html>

Open in new window

JavaScriptCSSHTML

Last Comment

cdemott33

8/22/2022 - Mon

Richard Davis

2/16/2010

Perhaps something like this might work for you.

~A~

var ScrollTop = document.body.scrollTop;

if (ScrollTop == 0)
{
  if (window.pageYOffset)
    ScrollTop = window.pageYOffset;
  else
    ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}

Open in new window

DT20Three

2/16/2010

You can do it by finding the scroll of the page and the window height. Replace your current JS with the following. You may want to include what adrian has written to make it fully cross browser supportive. This has only been tested working in IE8.

<script type="text/javascript">
    function showProcessing(fadeid,boxid){
        var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset);
        var myHeight = 0;
        // adapted from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
        if( typeof( window.innerHeight ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
        } else if( document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
        } else if( document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
        }
        document.getElementById(fadeid).style.top = vscroll;
        document.getElementById(boxid).style.top = vscroll + (myHeight / 4);
        document.getElementById(boxid).style.display='block';
        document.getElementById(fadeid).style.display='block';
    }
</script>

Open in new window

DT20Three

2/16/2010

Sorry, the above had 2 extra parentheses so it won't work:

<script type="text/javascript"> 
    function showProcessing(fadeid,boxid){ 
        var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset); 
        var myHeight = 0; 
        // adapted from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow 
        if( typeof( window.innerHeight ) == 'number' ) { 
            //Non-IE 
            myHeight = window.innerHeight; 
        } else if( document.documentElement.clientHeight ) ) { 
            //IE 6+ in 'standards compliant mode' 
            myHeight = document.documentElement.clientHeight; 
        } else if( document.body.clientHeight ) ) { 
            //IE 4 compatible 
            myHeight = document.body.clientHeight; 
        } 
        document.getElementById(fadeid).style.top = vscroll; 
        document.getElementById(boxid).style.top = vscroll + (myHeight / 4); 
        document.getElementById(boxid).style.display='block'; 
        document.getElementById(fadeid).style.display='block'; 
    } 
</script>