Div pop up, need close button solution

**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?

Code:

.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...

Code:

   
<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.

**vegasidol** · 08-05-2009, 09:04 PM

Code:

<!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">
<!--
@charset "UTF-8";
/* CSS Document */

*{margin:0; padding:0;}
body {
	margin-right: auto;
	margin-left: auto;
	width: expression(document.body.clientWidth < 902? "900px" : document.body.clientWidth > 1052? "1050px" : "auto");
	max-width: 1050px;
	min-width: 900px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-style: italic;
	text-align: center;
	color: #000;
	background-color: #FFF;
	behavior:url("Javascript/csshover.htc"); 
}
a:link {
	color: #666;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999;
}
a:hover {
	text-decoration: none;
	color: #999;
}
a:active {
	text-decoration: none;
}
.Header {
	height: 125px;
}
.SpanSprintHeader {
	height: 100px;
	padding-left: 12px;
	padding-top: 10px;
	padding-bottom: 15px;
	float: left;
}
.Title {
	font-size: 1.6em;
	font-weight: lighter;
	color: #000;
	margin-bottom: 5em;
	top: 1.3em;
	position: relative;
}
.Page {
	margin-right: auto;
	margin-left: auto;
	text-align:left;
	background-color: #f6f6f6;
	margin-top: 20px;
	width: 900px;
	height: 750px;
}
.Menu {
	width: 200px;
	float: right;
	margin-right: 50px;
	text-align: right;
	font-size: .9em;
	line-height: 1.3em;
}
.Ads {
	width: 165px;
	height: 170px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
}
.AdImage:hover {
}
.AdImage:hover div {
	display: block;
	background-color: #CCC;
	visibility: visible;
}
.AdsPane {
	position: absolute;
	top: 300px;
	left: 250px;
	width: 700px;
	height: 500px;
	display: none;
	visibility: hidden;
}
.Content {
	padding-right: 10px;
	padding-left: 10px;
}
.Tab {
	float: left;
	width: 222px;
	text-align: center;
	font-size: 0.9em;
	color: #999;
	font-weight: bold;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999;
	border-left-color: #999;
	height: 25px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFE100;
	line-height: 1.5em;
}
.Tabs {
	background-image: url(images/GrayGradient2.gif);
	height: 20px;
	}
.TabSelected {
	float: left;
	width: 222px;
	text-align: center;
	font-size: 0.9em;
	color: #000;
	font-weight: bold;
	background-color: #FFE100;
	height: 25px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	line-height: 1.5em;
}
.List_title {
	font-size: 0.8em;
	color: #333;
	font-style: italic;
}
.List_date {
	font-size: .8em;
	color: #666;
	font-style: italic;
}
.List_ID {
	font-size: .7em;
	color: #999;
	font-style: italic;
	text-align: center;
}
.Subhead {
	margin-left: 2em;
	font-size: .9em;
	font-weight: bold;
	height: 20px;
}
.TitlePopup {
	font-size: 1.6em;
	font-weight: lighter;
	color: #000;
	margin-bottom: 5em;
	top: 1.3em;
	position: relative;
}
.TitlePopup {
	font-size: 1.6em;
	font-weight: lighter;
	color: #000;
	margin-bottom: 5em;
	top: 1.3em;
	position: relative;
	width: 950px;
	background-color: #999;
}
#blanket {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
	position:absolute;
	background-color:#eeeeee;
	width:800px;
	height:700px;
	z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#PopUp1 {
	position:absolute;
	width:806px;
	height:510px;
	z-index:9003;
	left: 135px;
	top: 218px;
	background-color: #CCCCCC;
	visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<div class="Page"><!--Wrapper for 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"><!--Wrapper for Main Content-->
  <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>&nbsp;</div>
  <div class="Content"><!--Wrapper for Content-->
    <div id="blanket" style="display:none;"></div>
    <div class="Ads">
      <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

Thread: Div pop up, need close button solution

Thread Tools

Search Thread

Div pop up, need close button solution

Bookmarks

Bookmarks

Posting Permissions