function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lewis ReedLewis Reed 

Pop Up Windows

I have a pop up that is being shown, however the page is not directing back up to the top (where the pop up is)

I would like the pop up to be shown in the centre of the page when it appears

Can anybody offer any help?

My Css:

.custPopup{
    background-color: white;
    border-width: 2px;
    border-style: solid;
    z-index: 9999;
    left: 50%;
    padding:10px;
    position: absolute;
    /* These are the 3 css properties you will need to change so the popup 
    displays in the center of the screen. First set the width. Then set 
    margin-left to negative half of what the width is. You can add 
    the height property for a fixed size pop up if you want.*/
    width: 500px;
    margin-left: -250px;
    top:100px;
    font-size: 15px; 
    border-color: #da3e00;
}
.popupBackground{
    background-color:black;
    opacity: 0.20;
    filter: alpha(opacity = 20);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9998;
}



Thankyou in advance,

Lewis 
Best Answer chosen by Lewis Reed
suresh dupadasuresh dupada
Hi Lewis Reed,
             Try Below CSS, I am not sure PopUp will fit to center, But I am sure this will works. One thing you need to consider, You should include
     1. margin-top:30px;
     2. margin-left:120px;
These two attributes will decide your popup window position............... Increase and decrease (px) value, Definitely it works

.customPopup {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    left: 20%;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    /* These are the 3 css properties you will need to tweak so the pop 
                            up displays in the center of the screen. First set the width. Then set 
                            margin-left to negative half of what the width is. You can also add 
                            the height property for a fixed size pop up.*/
    width: 500px;
    top: 20%;
    margin-top:30px;
    margin-left:120px;
    
}

All Answers

Andy BoettcherAndy Boettcher
Read through this article and see if that helps you out at all:  http://www.dreamincode.net/forums/topic/106814-css-popup-in-center-of-window/
suresh dupadasuresh dupada
you can do this by inspect Element, Please right click on PopUp window and click on Inspect Element then you will be able to view properties, you can increase or decrease the popup window porperties through css 
Lewis ReedLewis Reed
Hi Guys - that did not work unfortunately, i tried editing my CSS to what the 
http://www.dreamincode.net/forums/topic/106814-css-popup-in-center-of-window/ explained to do, using the "height" attribute

like this:


.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
/* These are the 3 css properties you will need to change so the popup displays in the center of the screen. First set the width. Then set margin-left to negative half of what the width is. You can add the height property for a fixed size pop up if you want.*/
width: 500px;
margin-left: -250px;
height: 2000px;
font-size: 15px;
border-color: #da3e00;
}

.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
z-index: 9998;
}
 
suresh dupadasuresh dupada
Hi Lewis Reed,
             Try Below CSS, I am not sure PopUp will fit to center, But I am sure this will works. One thing you need to consider, You should include
     1. margin-top:30px;
     2. margin-left:120px;
These two attributes will decide your popup window position............... Increase and decrease (px) value, Definitely it works

.customPopup {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    left: 20%;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    /* These are the 3 css properties you will need to tweak so the pop 
                            up displays in the center of the screen. First set the width. Then set 
                            margin-left to negative half of what the width is. You can also add 
                            the height property for a fixed size pop up.*/
    width: 500px;
    top: 20%;
    margin-top:30px;
    margin-left:120px;
    
}
This was selected as the best answer
Lewis ReedLewis Reed
Cheers Suresh,

It actually worked using margin-top: -415px;

So it was indeed the margin top that worked. 

Thankyou for your help and support on the matter

Regards,

Lewis