1

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 popup 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.

7
  • 2
    It's great that you included a JSFiddle but where's the pop-up you're talking about?
    – Sparky
    Jul 25, 2011 at 22:11
  • I can't find it either. Also, I'm guessing that you are loading the pop-up window dynamically? If so, you need to calculate the width after it has been loaded.
    – Ivan
    Jul 25, 2011 at 22:12
  • @sparky672 I guess it's not really a popup. You have to click "Careers" on the menu bar and then click the button that says "Press Me Please!" I'll edit the original post. Thank you.
    – Michael
    Jul 25, 2011 at 22:13
  • @Ivan Please see the edit to the original post. Thank you.
    – Michael
    Jul 25, 2011 at 22:14
  • @Michael: Have you tried making JUST the popup work without the code and mark up for the rest of the site?
    – Ivan
    Jul 25, 2011 at 22:18

1 Answer 1

1

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 
});
1
  • I went through the css portion that I found out was causing the issue and it was the z-index part. I added the code you suggested to the .js file and still nothing was working, but when I removed the z-index part in the actual css part (not the .js code) the problem stopped and now it's working just fine. Thanks for your help.
    – Michael
    Jul 26, 2011 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.