Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with JS Popup Window

J

jotade11

macrumors regular
Original poster
Feb 2, 2009
113
0
No, this is not for an ad, this is for a school project. I am trying to create a site about Holden Caulfield (from The Catcher in the Rye) and I was hoping to create a popup when the page loaded, to give a little intro to the site for those who will be grading it! :)

I was hoping to make an in-browser window popup, (DHTML window?) and found a demo online, which I unsuccessfully tried to copy, paste and adapt. Here is the page I wish it would work for: http://cl.ly/2K3w0i0J1W1o433H1R0Z

And here is the page it does work on: http://cl.ly/2G1A1F0M3S0C3Z3w1G33

If anyone who could tell me why it isn't working (I suspect something in the JS or CSS styling links, but cannot seem to fix it), or could do it for me, I would be most appreciative!

Thanks so much!
 
What you want is generically known as a "javascript lightbox".

The reason its not working is because you didn't included the html for the pop-up or javascript to make it work in your document.

But the example your following is just terrible. You should stop using it.

Pop-up boxes/lightbox's are easy to create once you understand the concept behind it which is this. Two divs positioned absolutely, one covers the background, the other is for you content. And you use javascript to set display: block/none; Thats it!

Google lightbox you'll get hundreds of examples.

Heres a quick example just for you.

Code: 
<html>
	<head>
	<style type="text/css">
	*{ margin: 0; padding: 0; }
	
	#background {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
	}
	
	#box{
		width: 250px;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
		background: green;
		padding: 50px;
	}

	</style>
	<script type="text/javascript">
	function closebox(){
		document.getElementById('background').style.display = 'none';
	}
	</script>
	</head>
	<body>
		<div id="background">
			<div id="box">new content <a href="#" onclick="closebox();">close</a></div>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</body>
</html>
 
Ah, thank you so much! I probably should have found that :eek: I thought it was called a DHTML window or something stupid like that...

Thank you very much for your help, once again!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back