CODEWITHSUNDEEP
htmlcss
Earl Larson
Earl Larson

Reputation: 5309

How do I keep a pop up always centered?

This isn't irrelevant: Roseannebarr.tumblr.com is where the theme I am making is.

How do I keep those popups centered if they are position:absolute;?

Just so you know, I'm building a TUMBLR theme. Not a website.

HTML: You can't see these tags if you view the source because they are the content.

CSS

body {
font-family: 'Arial', sans-serif; color:#3a3a3a;
font-size:12px;
background: #e4e4e2;
word-wrap: break-word;
}

#holder {
position: relative;  
width: 500px;  
margin:0 auto;  
}

#tooltip {
display: none;
position:absolute;
width:480px;
background:#6cb4e2;
padding:10px;
}

#outer:hover #tooltip {
display: block;
}

#outer {
float:left;
}

ul, ol {
margin: 5px 0 0 30px;
}

.clear {
clear: both;
}

p {
margin: 5px 0 0 0;
}

HTML

 <body>
<div id="holder">
{block:Posts}
<div id="outer">
{block:Photo}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

<div id="outer">
{block:Text}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{block:Title}
<h1>{Title}</h1>{/block:Title}
{Body} {block:More}<p><a href="{Permalink}">Read on...</a></p>{/block:More}

</div>
{/block:Text}
</div>

{/block:Posts}

<div id="outer">
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

<h1>{Title}</h1>
{Description}

</div>
</div>
</div>

Upvotes: 0

Views: 1386

Answers (2)

Phrogz
Phrogz

Reputation: 303244

If you know the size of your popups, set the CSS like this:

.popup {
  position:absolute;
  top:50%; left:50%;
  width:320px; height:240px;
  margin-top:-120px; margin-left:-160px;
}

This puts the upper left corner popup in the center of the page, and then the negative margins center it exactly.

Upvotes: 2

Roman
Roman

Reputation: 10403

You need to assign an event handler to the resize event of the window. As the window is resized, your event handler will be notified to recalculate the new center and position the alert pop up accordingly.

Upvotes: 0

Related Questions