Avatar of cdemott33
cdemott33
Flag for United States of America asked on

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

Avatar of undefined
Last Comment
cdemott33

8/22/2022 - Mon
Richard Davis

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

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

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>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
DT20Three

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
cdemott33

ASKER
This worked for me.  Thank you!