Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering a pop-up window…

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #36314
    gringojason
    Member

    Hello…

    I am trying to center a pop-up window on my wordpress site. I am using a plug-in and I like how it works, but I am stumped on the CSS. Here is the link where you will see the pop-up.

    Here is the CSS…


    #PopUpFad {
    background: #f2f2f2;
    text-align: center;
    font-family: Arial,sans-serif;
    padding: 10px;
    border: 4px solid #000;
    top: 250px;
    position: absolute;
    margin: 0 auto;
    display: none;
    opacity: 0;
    KHTMLOpacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    z-index: 1000;
    }

    #PopUpFad a {
    text-decoration: none;
    border: none;
    font-size: 9px;
    color: #333;
    }

    #PopUpFad img {
    border: none;
    }

    #PopUpFad .PopUpFadClose {
    position: absolute;
    top: 5px;
    right: 5px;
    }

    #PopUpFad.show {
    display: block;
    }

    I have tried several things with #PopUpFad…

    1. I can adjust the vertical postion by changing “top: 250px;”, however if I add a “left:” or “right:” it does not affect the horizontal position.
    2. I have changed “position:absolute;” to fixed, relative, static…nothing.
    3. I saw a suggestion to try “display:inline-block;”…nothing.

    Everything I try, it’s like the left side is in a fixed position and will not center. Any suggestions?!? Thanks in advance for your help!!!

    Jason.

    #95426
    Maikel
    Member

    http://jsfiddle.net/Maikel1234/C5rRm/

    Make the negative margin’s half the size of the div’s height and width.

    #95427
    Maikel
    Member

    http://jsfiddle.net/Maikel1234/C5rRm/1/

    There, I wrote it for you.

    #95430
    gringojason
    Member

    I just saw what you wrote…going to test it. Thanks…

    #95437
    Maikel
    Member

    It also shouldn’t be that difficult to do this even with random images.
    If you’ve got like 20 million different images then I would recommend using JavaScript to do so.
    If there’s a few then you can ad an ID to the element and go from there.

    #95503
    gringojason
    Member

    Maikel…thanks for doing that. I appreciate it. I adjusted the code and added what you wrote…


    #PopUpFad {
    background: #f2f2f2;
    border: 4px solid #000;
    left: 514.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -100px;
    opacity: 0.9999899999999999;
    KHTMLOpacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    z-index: 1000;
    }

    I changed the “margin-top” and “margin-left” px numbers to move it around the screen and center it. It works…for most of the pictures. But for a couple of them, they are still off to the right, which doesn’t make sense to me. If you go to the link and refresh it a few times, you will see that some of them are centered and others not (there are 8 or 9 images in total). Do you see anything else I need to adjust?

    But this led me to another question that I am wondering if I can do with CSS. When the pop-up displays, I would like the whole browser window to be greyed out, with the pop-up image in the center. That way, the focus is on the pop-up and not on the site behind it. Then, they click out of the pop-up and see the page.

    So, is there a way with CSS to make the pop up window cover the whole browser window with a light gray color (maybe even slightly transparent by adjusting the opacity), with the image in the center?

    Maybe this is asking for too much, but given the capabilities of CSS, I am thinking it is possible. Thanks for your help…

    #95504
    Maikel
    Member

    First off, try to add classes for each picture in the div.

    Also, what you’re thinking of MIGHT be a jQuery Lightbox.

    jQuery light boxes are images or content in the center of the page while the rest of the page that’s not in the div is usually a dark color with opacity adjustments

    #95507
    gringojason
    Member

    Ok. Maikel…I messed around with it and got the pop-up consistently centered. Here is the current code…


    #PopUpFad {
    background: #fff;
    border: 4px solid #000;
    position: absolute;
    height: 80%;
    width: 60%;
    margin-top: -780px;
    margin-left: -385px;
    opacity: 0.9999899999999999;
    KHTMLOpacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    z-index: 1000;
    }

    I love how that looks. Perfectly centered. I decided against filling the whole browser window because I didn’t like the look of it. Having the extra while space around the images is fine with me.

    But now my issue is getting the image centered in the pop-up. I can get it centered horizontally, but not vertically. I know this is getting out of CSS and into HTML, but this is the code I have for my text image…









    Obviously, the “valign” is not working. I tried it on the tr level and even without the table, but I cannot get the image centered. Any suggestions? Thanks again for all your help…

    #95518
    Maikel
    Member
    #95519
    gringojason
    Member

    Arrrrrggghhhh. Doesn’t work. I got all excited because it should work…made sense to me. So, I added the CSS you wrote to the bottom of the plug-in CSS file and it looks like this…

    #PopUpFad {
    background: #fff;
    border: 4px solid #000;
    position: absolute;
    height: 80%;
    width: 60%;
    margin-top: -780px;
    margin-left: -385px;
    opacity: 0.9999899999999999;
    KHTMLOpacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    z-index: 1000;
    }

    #PopUpFad a {
    text-decoration: none;
    border: none;
    font-size: 9px;
    color: #333;
    }

    #PopUpFad img {
    border: none;
    }



    #PopUpFad .PopUpFadClose {
    position: absolute;
    top: 5px;
    right: 5px;
    }

    #PopUpFad.show {
    display: block;
    }

    #wrapper {
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #wrapper td {
    vertical-align: middle;
    text-align: center;
    }

    Then I added the HTML to the plug-in content area…





    And nothing changed. Still centered horizontally, but not vertically. I even took the CSS you wrote and added it to my theme’s custom CSS to see if that would work. Still no change. Did I input something wrong? I REALLY appreciate all the help you are giving me. Thanks…

    #95567
    gringojason
    Member

    Anyone else have any suggestions for this? Thanks…

    #95913
    gringojason
    Member

    Fixed it!! Found a solution. Thanks for everyone’s help…

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.