Jump to content

trouble moving a pop up to the centre of the page


totallytech

Recommended Posts

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>

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

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.

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.