Help with JS Popup Window

Discussion in 'Web Design and Development' started by jotade11, Jun 1, 2011.

  1. jotade11 macrumors regular

    Joined:
    Feb 2, 2009
    #1
    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!
     
  2. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #2
    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>
     
  3. jotade11 thread starter macrumors regular

    Joined:
    Feb 2, 2009
    #3
    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!
     

Share This Page