Help with positioning a pop-up box

I'm using Greybox (orangoo.com/labs/GreyBox/ ) with a php script. It works great. However, I'd like to have it appear on the right side of the page, instead of appearing in the center of the page, when it pops-up. Someone suggested tweaking the css file. I've tried, maybe it needs code added to accomplish this. I don't know. Any help would be appreciated.

#GB_overlay {
background-color: #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
}

#GB_window {
left: 0;
top: 0;
font-size: 1px;
position: absolute;
overflow: visible;
z-index: 150;
}

#GB_window .content {
width: auto;
margin: 0;
padding: 0;
}

#GB_frame {
border: 0;
margin: 0;
padding: 0;
overflow: auto;
white-space: nowrap;
}


.GB_Gallery {
margin: 0 22px 0 22px;
}

.GB_Gallery .content {
background-color: #fff;
border: 3px solid #ddd;
}

.GB_header {
top: 10px;
left: 0;
margin: 0;
z-index: 500;
position: absolute;
border-bottom: 2px solid #555;
border-top: 2px solid #555;
}

.GB_header .inner {
background-color: #333;
font-family: Arial, Verdana, sans-serif;
padding: 2px 20px 2px 20px;
}

.GB_header table {
margin: 0;
width: 100%;
border-collapse: collapse;
}

.GB_header .caption {
text-align: left;
color: #eee;
white-space: nowrap;
font-size: 20px;
}

.GB_header .close {
text-align: right;
}

.GB_header .close img {
z-index: 500;
cursor: pointer;
}

.GB_header .middle {
white-space: nowrap;
text-align: center;
}


#GB_middle {
color: #eee;
}

#GB_middle img {
cursor: pointer;
vertical-align: middle;
}

#GB_middle .disabled {
cursor: default;
}

#GB_middle .left {
padding-right: 10px;
}

#GB_middle .right {
padding-left: 10px;
}


.GB_Window .content {
background-color: #fff;
border: 3px solid #ccc;
border-top: none;
}

.GB_Window .header {
border-bottom: 1px solid #aaa;
border-top: 1px solid #999;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
margin: 0;

height: 22px;
font-size: 12px;
padding: 3px 0;
color: #333;
}

.GB_Window .caption {
font-size: 12px;
text-align: left;
font-weight: bold;
white-space: nowrap;
padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span {
font-size: 12px;
cursor: pointer;
}
.GB_Window .close img {
cursor: pointer;
padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid #333; }
.GB_Window .click { border-bottom: 1px solid red; }

It would *appear* that the centering is done in JavaScript code, as the CSS implies the the window is at the top left:

#GB_window {
left: 0;
top: 0;
font-size: 1px;
position: absolute;
overflow: visible;
z-index: 150;
}

This is a common way to specify things that will then be positioned via JS code: start at 0,0 and then the JS code changes it.

So without the relevant JS code...

Thanks so much for your reply. I appreciate you trying to help me. I'm sure what you're saying is true, however, I'm not sure what your trying to tell me, or suggest, or ask. Can you clarify, please?

Ummm...in short...you need to show the JavaScript code that is invoked when the box is shown.

It's probably actually going to some lengths to position it in the middle.

You should be able to figure out what you are doing that *causes* the popup (hitting a link, clicking a button, whatever), so find what code that is calling and then show that code.

Well, that sucks. I looked at GrayBox, and read their docs. They don't *HAVE* a way to do what you want.

Afraid you'll have to either change their code or find some other popon.

Are you using GrayBox to show an image or a full web page??

If just an image, there are tons of more flexible options out there. If a full web page, it's a bit trickier.

Thanks for looking into that. It pops-up a player and plays a web video.
It works well, so i don't want to start over with another pop-up. So now i'm searching for help with the tweaking the Greybox code, so it will pop-up on the left, instead of the center of the page. Any help will be appreciated.

Well, there MAY be a reasonable way to do this.

If you look in his docs, he shows this possibility:

GB_show(caption, url, /*optional*/ height, width, callback_fn)

Example:

<a href="http://google.com/" onclick="return GB_show('Google', this.href)">Visit Google</a>

Now, I don't know what he does with that callback_fn and/or what parameters are passed to that function. His documentation is...well, "lacking" would be a nice word.

But I'd be tempted to try it to see what arguments, if any, he hands to you.

I note that the code that does the positioning *does* always center the window.

It is here in the "window.js" file:

AJS.setLeft(this.g_window, ((page_size.w - this.width)/2)-13);

Possibly you could change that line to simply:

AJS.setLeft(this.g_window, 0 );

or whatever left position you want.

You could also extend that class to accept left and top positioning info.

But, finally, you *MIGHT* be able to do this:

MY_show = function(caption, url, height, width, top, left) {
var options = {
caption: caption,
height: height,
width: width,
fullscreen: false
}
var win = new GB_Window(options);
AJS.setLeft( win.g_window, left );
AJS.setTop( win.g_window, top );
return win.show(url);
}

And then use MY_show in place of his GB_show.

But that is just guessing, from reading his code.

Thanks for your help.

Thsi actually did it:

Changing the line to this, as you suggested:

AJS.setLeft(this.g_window, 0 );

That did it. I was surprised. You're brilliant. Thanks much