×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

ModalPopup not centered
2

ModalPopup not centered

ModalPopup not centered

(OP)
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! :)

RE: ModalPopup not centered

Assuming you want to center it in the middle of the window, try this:

CODE --> CSS

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: 350px;
        height: 101px;
        margin-left:-175px;
        margin-top: -50px;
} 

----------------------------------
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 &amp; Tech

RE: ModalPopup not centered

(OP)
Thank you! [glasses] It worked!!!!!

RE: ModalPopup not centered

How can you be sure that those margins will work for any size screen? I am not CSS expert and I am curious. Thanks

RE: ModalPopup not centered

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 &amp; Tech

RE: ModalPopup not centered

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.

RE: ModalPopup not centered

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 &amp; Tech

RE: ModalPopup not centered

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
www.darryncooke.com | Marketing and Creative Services

RE: ModalPopup not centered

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 &amp; Tech

RE: ModalPopup not centered

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:

CODE --> css

top: 50%;
left: 50%; 
To get the box centred, we need to define how tall and wide it is:

CODE --> 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:

CODE --> css

margin-left: -176px;
margin-top: -51px; 
Note that if you add any padding 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 = width + 2 * (border-width + padding)
overall height = height + 2 * (border-width + padding)

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

-- Chris Hunt
Webmaster &amp; Tragedian
Extra Connections Ltd

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close