1 reply [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 weeks 6 days ago
Timezone: GMT-4
Joined: 2010-12-01
Posts: 118
Points: 173

I am not a javascript coder, but I wanted to make pop windows on my webpage, without a separate window. I followed the instructions I found here:http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/
It worked well. However, I want to make more than one popup on my webpage- I have thumbnail images that I want to popup and view in big when the user clicks on it. How do I make numerous popups? The popup is called ('PopUpDiv') I tried changing it to ('PopUpDivTwo') in all the places in the code where it says ('PopUpDiv') but it did not work smoothly.
Please have a look at my code, and what I changed. The link to my webpage is www.totalrecallsolutions.com/corporate. I am sure that I have to make changes to the js file as well, but I'm not sure exactly what... (I tried copying and pasting the existing code, and subsituting ('PopUpDivTwo') instead of ('PopUpDiv'), but that didnt work.
the js file is called popup_blanket, the style css file is called style.css.

Please help asap!! Thanks.

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 41 weeks 1 day ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

Its not big deal. change your

Its not big deal. change your script code from below:

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-200;//150 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-200;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}