Center a popup using JavaScript

ASKER

What do you mean by the viewport dimensions? Is this the same - or nearly the same as the overall screen size?

Nope. Size of browser window

however height is correct assuming it is spelled correctly and you spelled dialogHeight correctly too

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

what is the \t for? A tab before a line feed does not make much sense

Strictly for text placement in the window - it pushes the right border away a smidge.

It's just one of my pet peeves.

Proculopsis

Is something like this any good:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26657793.html</title>

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<style>
#login
{ width: 300px; height: 150px; border: 1px solid black; text-align: center; position: absolute; margin-left: -150px; margin-top: -75px; left: 50%; top: 50%; z-index: 20; display: none; background-color: beige; }
</style>

<script>
var overlayOpacity = 0;

function overlayRefresh()
{
  $("#grey-overlay").css({"opacity":overlayOpacity,"width":$(document).width(),"height":$(document).height(),"position":"absolute","left":0,"top":0,"background":"black"});
}

$(function(){
  $(window).resize( overlayRefresh );

  $("#tryme").click(function(){
    overlayOpacity = 0.7;
    overlayRefresh();
    $('#login').css({"display": "block"});
    $('#grey-overlay').css({"display": "block"});
  });

  $("#register").click(function(){
    overlayOpacity = 0;
    overlayRefresh();
    $('#login').css({"display": "none"});
    $('#grey-overlay').css({"display": "none"});
  });

});
</script>

</head>

<body>

<div id="grey-overlay"></div>
 
<input id="tryme" type="button" value="Try Me!" />
 
<div id="login">
Please fill in and submit your details <br />
Name <input type="text" /> <br />
Phone <input type="text" /> <br />
Address <input type="text" /> <br />
<input id="register" type="button" value="Register" />
</div>

</body>
</html>

Open in new window

ASKER

Badotz:

Your solution works fine, except it's screen height is not equal to viewport height.

Questions: screen height/width gives me 1024x1280. So, this is the system screen resolution. The height/width returned by your getmetrics is 820x1280. So, this is the space within the browser into which a page is rendered, correct? This is called the viewport? is there a way to determine, in a browser independent way, the difference between the screen height and the viewport height? This would be when the browser is maximized.

ASKER

Thanks. A nice solution.

ASKER

NOTE: I was incorrect in my initial post that screen.height does not work on Internet Explorer. screen.height does work. I had these lines of code:

width = 800; height = 500;
top = screen.height / 2 - (height / 2);
left = screen.width / 2 - (width / 2);

I did not declare top and left, and this gave me the error using Internet Explorer. If I declare them (below), all is good:

width = 800; height = 500;
var top = screen.height / 2 - (height / 2);
var left = screen.width / 2 - (width / 2);

As I said

ASKER

mplungjan:

Where did you say that? You talked about spelling...

I said "height" is correct assuming it is spelled correctly.

top and left could be seen by IE when you did not use var, which make them local to the function. Shows how important it is to post complete code that shows the issue

No worries, glad to help.

But others helped, too, I just put the pieces together.

Comments?

ASKER

yes, but I used your solution - sort of. And not the others.

Plus, the issue turned out to be the fact that I did not declare the variables - not that screen.height was not supported in IE. IE did not like the fact the I did not explicitly declare the variables.

>>the issue turned out to be the fact that I did not declare the variables

As pointed out by mplungjan. Certainly that was worth something?

ASKER

I missing something here. If he truly pointed this out, I want to give him credit. but where does he say that I needed to declare the variables? He only mentions spelling...

Read post http:#a34277542.

ASKER

I think we are seeing this issue differently. All mplungjan talked about in his initial post was spelling...

The post you referenced was added as a result of me asking him where he mentioned explicit declare, which he claimed he mentioned, but he did not.

And Yes, I have read that post, and I'll claim it supports what I am saying. He says that IE should see left and top variables without using var, correct? BUT IE did NOT. IE gives me this error when I do not explicitly declare: (see image) .

This will be my last post on this issue.

IE-Error.jpg

Finally! Actual code!

Did you press the "Break" button? If so, what was the value of:

width (global var)
height (global var)
top (global var)