Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ModalPopup not centered 2

Status
Not open for further replies.

pinkpoppy

Programmer
Jul 6, 2011
75
US
Hello, I have been having this issue for over a week and I am about to pull my hair out. It is not centering for me. Here's what I have right now for the css (I've searched for solutions and tried just about every one of them available on the internet, this is what I have so far for it.)

Code:
div.ModalPopup2
    {

        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-style: normal;
        background-color: #544d3d;
        position: fixed; /* set z-index higher than possible */
        z-index: 10000;
        color: Black;
        border-style: solid;
        border-color: #999999;
        border-width: 1px;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        margin-top: -9em;
        margin-left: -23em;
    }


And this is how is it used. The popup is off to the left.

Code:
<div id="divLogout" align="center" class="ModalPopup2" runat="server" style="display: none;">
                         <table style="background-color: #F6F3EE; border: solid 2px #000000;" cellpadding="2" cellspacing="2">
                               <tr>
                              <td align="center">
                                 <span style="color: Red; font-weight: bold;">
                              Are you sure you want to log out?<br />
                               Your data will not be saved.</span>
                                            </td>
                                            </tr> 
                                            <td align="center">
                                                <asp:Button ID="btnYes" UseSubmitBehavior="false" CssClass="button" runat="server" CausesValidation="false"
                                                    Text="Yes" OnClick="btnYes_Click" Height ="30px" Width= "85px" />
                                                <asp:Button ID="btnNo" UseSubmitBehavior="false" CssClass="button" runat="server" CausesValidation="false"
                                                    Text="No" OnClick="btnNo_Click" Height ="30px" Width= "85px"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 
                                            </td>
                                        </tr>
                                    </table>
                                </div>

Any help and suggestions is greatly appreciated! :)
 
Assuming you want to center it in the middle of the window, try this:

Code:
div[COLOR=#993399].ModalPopup2[/color]
[tab][COLOR=#FF0000]{[/color]

[tab][tab][COLOR=#0000FF]font-family:[/color] [i][COLOR=#009900]Verdana[/color][/i], [i][COLOR=#009900]Arial[/color][/i], [i][COLOR=#009900]Helvetica[/color][/i], [i][COLOR=#009900]sans-serif[/color][/i];
[tab][tab][COLOR=#0000FF]font-size:[/color] [i][COLOR=#009900]15px[/color][/i];
[tab][tab][COLOR=#0000FF]font-style:[/color] [i][COLOR=#009900]normal[/color][/i];
[tab][tab][COLOR=#0000FF]background-color:[/color] [COLOR=#FF0000]#544d3d[/color];
[tab][tab][COLOR=#0000FF]position:[/color] [i][COLOR=#009900]fixed[/color][/i]; [i][COLOR=#9A1900]/* set z-index higher than possible */[/color][/i]
[tab][tab][COLOR=#0000FF]z-index:[/color] [i][COLOR=#009900]10000[/color][/i];
[tab][tab][COLOR=#0000FF]color:[/color] [i][COLOR=#009900]Black[/color][/i];
[tab][tab][COLOR=#0000FF]border-style:[/color] [i][COLOR=#009900]solid[/color][/i];
[tab][tab][COLOR=#0000FF]border-color:[/color] [COLOR=#FF0000]#999999[/color];
[tab][tab][COLOR=#0000FF]border-width:[/color] [i][COLOR=#009900]1px[/color][/i];
[tab][tab][COLOR=#0000FF]top:[/color] [i][COLOR=#009900]50%[/color][/i];
[tab][tab][COLOR=#0000FF]left:[/color] [i][COLOR=#009900]50%[/color][/i];
[tab][tab][COLOR=#0000FF]width:[/color] [i][COLOR=#009900]350px[/color][/i];
[tab][tab][COLOR=#0000FF]height:[/color] [i][COLOR=#009900]101px[/color][/i];
[tab][tab][COLOR=#0000FF]margin-left:[/color][i][COLOR=#009900]-175px[/color][/i];
[tab][tab][COLOR=#0000FF]margin-top:[/color] [i][COLOR=#009900]-50px[/color][/i];
[COLOR=#FF0000]}[/color]


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
How can you be sure that those margins will work for any size screen? I am not CSS expert and I am curious. Thanks
 
Welcome.
The Margins are based on the dimensions I gave the modal popup. As long as the popup has those dimensions it will be centered in every screen.

If you change the dimensions, you'll need to change the margins. They are basically half of the width and height of the popup.

You can test the centering, by resizing your browser window.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
I see so it's dependent on the size of the modal popup. I have never seen it done with CSS. In my experience, I have usually seen it done dynamically with javascript. But that gets ify depending on the browser and version.

Thanks for the explanation.
 
Yup. You have to move the popup half of its width back to the left, and half of its height up so it centers.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Since his modal is fixed dimensions and he is relatively placing the modal then simply moving the modal 1/2 of the width and height in the opposite direction it will be centered.

Darryn Cooke
| Marketing and Creative Services
 
That's what I said. And it didn't originally have fixed dimensions. I gave it the fixed dimensions.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Just to further flog this dead horse, here's how this works...

This bit of CSS tells the browser to put the top left corner of the box in the centre of the screen:
CSS:
top: 50%;
left: 50%;
To get the box centred, we need to define how tall and wide it is:
CSS:
border-width: 1px;
width: 350px;
height: 101px;
So the box is 352 pixels wide (box width + 2 borders) and 103 pixels high (Box height + 2 borders). So to get the box centred on the screen, we need to move it left and up by half those distances. We can do that with negative margins:
CSS:
margin-left: -176px;
margin-top: -51px;
Note that if you add any [tt]padding[/tt] to the box, you'll need to account for that in the height/width calculations in the same way you do the border:

overall width = [tt]width[/tt] + 2 * ([tt]border-width[/tt] + [tt]padding[/tt])
overall height = [tt]height[/tt] + 2 * ([tt]border-width[/tt] + [tt]padding[/tt])

(assuming you go for the same border/padding width all the way round, that is)

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top