trouble moving a pop up to the centre of the page

[totallytech]

Hey Guys,

I've got a pop up box showing the cookie warning (for the EU laws).

I've got it in the corner of the screen and that's working fine but I want to centre it to the middle of the page.

This is the code that I use to place the popup overlay top right, how can I change the css to make it centred?

<style>
#tpmask {
background-color: #000000;
z-index: 9999;
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0.6;
height: 100%;
width: 100%;
}

#boxes .window {
right:20px;
top:20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width:auto;
height:auto;
display:none;
z-index:9999;
padding:20px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

#boxes #dialog {
position: absolute; 
width: auto;
margin: auto;
max-width: 800px; 
height: auto;
_width: 0;
white-space: normal;
overflow: visible;
padding: 10px;
font-family: 'Lucida Grande', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
color: #FFFFFF;
font-size:13px !important;
}

#dialog a:link, a:visited, a:hover {
color: #000000
}

*html #boxes .window {
position: absolute;
}

#boxes .window .close {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url('images/close.png');
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: auto;
height: 36px;
right: -19px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: -19px;
width: 36px; 
}
</style>

[Frank P]

You'll have to give the html, too. Please trim it down to size, keeping only the relevant parts.

[totallytech]

Hey,

 

This is the code thats directly affected. I've removed one of the additional </div> however I think it may be from somewhere else on the page too so I put it back.

 

<div id="tpmask"></div></div>

<a id="totally-popup" name="totallypopup" href="#dialog"></a>
<div id="boxes">
<div id="dialog" class="window">
<p>Hello. We use cookies on this website<br />to help us and our partners improve<br />your browsing experience. <a href="XXX" rel="nofollow" target="_blank">More Info</a></p><a class="close" href="#"></a>
</div>
</div>

 

You can view a demo of the trouble at goo.gl/iAsxB

Edited January 28, 2013 by totallytech

[Love2c0de]

Hey dude,

 

Take a look at this website right here: http://www.wpdfd.com...eadcentre4.html

 

See if you can have a go at integrating these styles into your own.

 

Hope it helps.

 

Let me know how you get on.

 

Kind regards,

 

Lab.

Edited January 28, 2013 by Love2c0de

[Frank P]

Hey,

This is the code thats directly affected. I've removed one of the additional </div> however I think it may be from somewhere else on the page too so I put it back. (...) You can view a demo of the trouble at goo.gl/iAsxB

Sorry, but I'm seeing a number of basis errors while at the same I do not see the error that causes the unwanted behaviour. I don't have time to sort that all out. I'm gonna have to refer you to the free tutorials I wrote on CSS positioning and centering, available on this site.