jQuery popup centering incorrectly

I'm trying to implement the following jQuery popout feature on my site: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ I have the popup appearing, however, instead of it being centered in the middle of the window, it seems that the pop开发者_运维知识库up is using the background image as a container and then inputting the form that I'm using in there. So the form isn't even completely viewable. I'm trying to get the popup to center in the window so that the form will be completely visible. I'm also using this form tutorial as my form template: http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/

Any ideas as to why it's just being weird? I'm fairly new to jQuery, so obviously I'm doing something wrong, but I have no idea. I've done some research and tried different DOM object references in the popup.js file under the centerPopup() function, but nothing I try affects the popup. It only affects where the form appears...

I'm been working on this for two hours, so I'm at wits end and would appreciate any help you can give. Thank you.

Here's the JSFiddle: http://jsfiddle.net/LxjN2/11/

EDIT

To get to the "popup" or popout as I think of it, you have to click the "Careers" tab on the menu bar and then click the "Press Me Please!" button. Then you'll see the popout.

---

Your problem (if I'm understanding it correctly) is with your HTML nesting. Your <div id="popupContact"> is a child element of the panel it is launched from, and somewhere along the line one of the panel's parent elements has it's overflow css property set to hidden. This is why it's getting cut off.

Move the popupContact div outside of your panel div (maybe just below your closing body tag), and it'll be rendered within the context of the main window, instead of being chopped off inside the panel.

Best of luck.

EDIT: Also, your "fancy sliding form" has a z-index that's trumping your popup's. To fix this, just change your centerPopup js function to include a z-index of above 1000... like so:

$("#popupContact").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2,
    "z-index": 2000 
});