Div pop up, need close button solution [Archive]

vegasidol

07-30-2009, 05:44 PM

I'm still fairly new to CSS, and I'm just stumped. I'm using the :hover pseudo-class to make a div appear as a pop up (large popup with additional information). The div disappears nicely when you roll off the primary image or the new div, but is rather large, and I'd like to add a 'close button' to the upper corner if it's not so intuitive to mouse off the area. All my searches for code have resulted in using javascript for the show/hide function. Is there a way to use the below CSS and add additional CSS that would close/hide the popup div?

.Ads {
width: 165px;
height: 165px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
}
.AdImage:hover div {
display: block;
background-color: #CCC;
}
.AdsPane {
position: absolute;
top: 300px;
left: 250px;
width: 700px;
height: 500px;
display: none;
}

Thanks...

<div class="Ads">
<span class="AdImage">
<img src="images/ads_080919_02_sm.jpg" width="120" height="90" border="1" />
<div class="AdsPane">New Popup Div Content</div>
</span>
</div>

TheJoshMan

08-03-2009, 08:31 PM

Check out this tutorial... He gives examples of how you can use the :focus pseudo selector to apply css styles to items...

http://bonrouge.com/br.php?page=cssonclickswitch#n

vegasidol

08-05-2009, 09:03 PM

Josh, thank you. :) That page was very interesting...and just about what I needed. (it's at least what I asked for.)

I think I need a javascript solution. I'm don't know much about javascript, but I've been looking at some options, including the ones on bonrouge that you linked to, and these seem to be more in line with what I need.

I found some code that provides me the pop up div function that I like, with a 'close button' option as well. Unfortunately it seems at though it needs a uniquely name div for each instance of the pop up. I need the pop up to correspond with the selected thumbnail, and I can't keep up with uniquely listed div tag names and related code. The site refreshes each week and so items go, some stay, and new ones are added. They aren't added or removed sequentially.

This is what I have. Is there anyway to modify the code/javascript to put the corresponding information in 'popUpDiv' each time?

(code added to next post)

Thank you for all your help...I'm pretty new to everything beyond basic html. :o

vegasidol

08-05-2009, 09:04 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brand Summary</title>
<script type="text/javascript">// JavaScript Document
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-350;//350 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-400;//400 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}</script>

<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>

<body>
<div class="Page">
<div class="Header"><span class="Title">Brand Communication Summary </span>

<div class="Menu">
<p><a href="TV.html">TV</a></p>
<p><a href="Print.html">Print</a></p>
<p><a href="Digital.html">Digital Marketing</a></p>
<p><a href="Radio.html">Radio</a></p>
<p><a href="FSI.html">FSI</a></p>
<p><a href="Outdoor.html">Outdoor</a></p>
</div>
</div>
<div class="Subhead">TV - Click image for details</div>

<div class="MainContent">
<div class="Tabs">
<div class="TabSelected">Business</div>
<span class="Tab"><a href="Consumer.html">Consumer</a></span> <span class="Tab"><a href="Hispanic.html">Hispanic</a></span> <span class="Tab"><a href="SportsEntertainment.html">Sports and Entertainment</a></span> </div>
<div class="Content">
<div id="blanket" style="display:none;"></div>
<div class="Ads">
<p> </p>
<div id="popUpDiv" style="display:none;"><a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>First pop up div</div>
<span class="AdImage">
<a href="#" onclick="popup('popUpDiv')"><img src="images/ads_080919_02_sm.jpg" width="120" height="90" border="1" /></a>
</span>

<p><span class="List_title">What's happening Now. <br />
Version B</span><br />
<span class="List_date">4/20</span><br />
<span class="List_ID">atb_090417_02</span></p>
</div>
<div class="Ads">
<p> </p>
<div id="popUpDiv" style="display:none;"><a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>Another div</div>
<span class="AdImage">
<a href="#" onclick="popup('popUpDiv')"><img src="images/ads_080919_03.jpg" width="120" height="90" border="1" /></a>
</span>

<p><span class="List_title">What's happening Now. <br />
Version B</span><br />
<span class="List_date">4/20</span><br />
<span class="List_ID">atb_090417_02</span></p>
</div>
<div class="Ads">
<p> </p>
<div id="popUpDiv" style="display:none;"><a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>xxxxxxx</div>
<span class="AdImage">
<a href="#" onclick="popup('popUpDiv')"><img src="images/ads_080919_02.jpg" width="120" height="90" border="1" /></a>
</span>

<p><span class="List_title">What's happening Now. <br />
Version B</span><br />
<span class="List_date">4/20</span><br />
<span class="List_ID">atb_090417_02</span></p>
</div>
<div class="Ads">
<p> </p>
<div id="popUpDiv" style="display:none;"><a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>AAAAAA</div>
<span class="AdImage">
<a href="#" onclick="popup('popUpDiv')"><img src="images/ads_080919_04.jpg" width="120" height="90" border="1" /></a>
</span>

<p><span class="List_title">What's happening Now. <br />
Version B</span><br />
<span class="List_date">4/20</span><br />
<span class="List_ID">atb_090417_02</span></p>
</div>
</div>
</div>
</div>

</body>
</html>