How do i do this?

**Ant_Magma** · 04-16-2008 03:51 AM

How do i do this?
http://goburo.com/?page_id=2
Click on the image and an image pops up with the background turning dark without reloading or exiting the page.

Well i'm not sure is this done with AJAX but sure it's cool. I'm guessing it can be done with a couple of lines of code. What should be the keyword i'm looking for?

**thinktejas** · 04-18-2008 03:13 AM

Try using the following script and css

Code:

<script>
function maskIt()
{
     var bodObj=document.getElementsByTagName("body")[0];
     var maskDiv= document.createElement("div"); 
     maskDiv.className="maskClass";
     bodObj.insertBefore(maskDiv,bodObj.childNodes[0]);
}
</script>

Code:

<style>
.maskClass {
    z-index:5;
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:inherit;
    -moz-opacity: 0.50;
    opacity:.50;
    filter: alpha(opacity=50);
    background-color:#000000;
}
</style>

copy and paste the above code into the head tag of your html page and then call the maskIt() function.

**Ant_Magma** · 04-18-2008 05:31 AM

Hi thinktejas, thanks for your great reply.

But can you show me how to use this script? I should have probably mention before that i have no experience with javascript

.

I entered this at my <body> but nothing happened.

<Script Language="JavaScript">
maskIt();
</Script>

Where do i add the path to my image which i want to show, similar to the initial website i gave?

**Hack** · 04-18-2008 07:42 AM

Originally Posted by thinktejas

copy and paste the above code into the head tag of your html page

Did you do this?

**Ant_Magma** · 04-18-2008 08:49 PM

Originally Posted by Hack

Did you do this?

Yep i did. Here's my code

Code:

<html>
<head>
<title>
	Title
</title>
	<script>
	function maskIt()
	{
	     var bodObj=document.getElementsByTagName("body")[0];
	     var maskDiv= document.createElement("div"); 
	     maskDiv.className="maskClass";
	     bodObj.insertBefore(maskDiv,bodObj.childNodes[0]);
	}
	</script>

	<style>
	.maskClass {
	    z-index:5;
	    display:none;
	    position:absolute;
	    top:0;
	    left:0;
	    height:inherit;
	    -moz-opacity: 0.50;
	    opacity:.50;
	    filter: alpha(opacity=50);
	    background-color:#000000;
	}
	</style>

</head>

<body>

<Script Language="JavaScript">
maskIt();
</Script>

</body>
</html>

What did i miss? Also where do i put the link which i'm suppose to bring up with the effect? The maskIt() doesn't take any arguments.

**thinktejas** · 07-30-2008 05:09 AM

You can call the maskit function on Body load.

<body onload="maskIt()">
</body>

Thread: How do i do this?

Thread Tools

Display

How do i do this?

Bookmarks

Bookmarks

Posting Permissions