Home > General > Affiliate Marketing Forum

How To Make Javascript Pop Message When Certain Links are clicked? (4)

12-17-2012 08:31 PM #1 vidivo (Member)
How To Make Javascript Pop Message When Certain Links are clicked?

Have any of you guys seen those clickbank videos where they want people to optin first before they are shown the video and if they try and click on the video to play it something pops up telling them to optin in first?

I wanted to try this on one of my landers but cant find a lander that does it.. do you guys know of a lander or know the code?

Thanks!

12-18-2012 12:49 AM #2 leeches (Member)

This code should be similar to what you are looking for. Can be tweaked to your liking.

Add this to your stylesheet or in the head of the lander you are making.

Code:

<style>
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.6;
	opacity:.60;
	filter: alpha(opacity=60);
}
 
.white_content {
	display: none;
	position: absolute;
	top: 5%;
	left: 25%;
	width: 800px;
	height: 440px;
	padding: 16px;
	background-color: white;
	z-index:1002;
	overflow: auto;
}
</style>

Add this to your <body> tag on your lander. This will make it pop when page is loaded. You will need to remove this and place on your hyperlink using onclick instead of onload (i think) if you want it to only pop when a link is clicked but this might be nice to have too.

Code:

<body onload = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

At the bottom of your lander you place your popup message and whatnot before the ending body tag. Like this for example.

Code:

<div id="light" class="white_content">
<br><br>
<h2>
<center>
<a href="#" target="_blank">Click Here To Do Something</a>
</center>
</h2>
</div>

This calls for the black overlay and will make it disappear if the black area is clicked on.

Code:

<div id="fade" class="black_overlay" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

Hope this helps or at the very least gets you started.

12-18-2012 10:09 AM #3 vidivo (Member)

Hey, i tried that but i couldnt get it to work and i think you confused me a bit. I want a message to pop, javascript message, stating you need to submit your email in order to watch the video and for them to press ok. that is all, i dont think a style is required for a simple javascript message like this...

All i need is a javascript to be fired on certain clicks on my website. Hope that explains it more but thanks for helping out!

12-18-2012 10:49 PM #4 zeno (Administrator)

Can you make a lander that just has a replica image in place of the video that displays an alert when you click it? Then when someone opts-in it goes to a new page that has the real video. You could probably cookie them when they optin so they always go to it rather than the original lander. For the alert it would be as simple as something like:

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function optAlert()
{
alert("Please Opt-in to view the video!");
}
</script>
</head>
<body>

<a href="#"><img src="fakevideo.jpg" onclick="optAlert()"></a>

</body>
</html>

Home > General > Affiliate Marketing Forum