[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

How do I make a pop up page like light box.

Lately I have noticed lots of sites using popups like:

http://www.huddletogether.com/projects/lightbox/ (Click on image)

Does anybody know what this effect is called and where there is a tutorial?
0
lwfuk
Asked:
lwfuk
  • 5
  • 3
1 Solution
 
David S.Commented:
I just call it LightBox. I suppose technically it's a kind of "modal dialog".

Here's a newer version of that: http://www.lokeshdhakar.com/projects/lightbox2/

You could also look at ThickBox (http://jquery.com/demo/thickbox/) which is very similar.

As for tutorials, if the information on those pages isn't enough for you, I suggest you look for beginners materials for CSS and JavaScript.
0
 
lwfukAuthor Commented:
I know all about light box. That's why I included the link.

I am looking for a tutorial on how to create the popup effect in css/javascript.

I want to take an html page and make it popup whilst masking out all of the surrounding stuff like they do in lightbox.

Does anybody know what it is called and how to do it?
0
 
David S.Commented:
Oh you want to learn how to make the different pieces of it yourself. Why didn't you say so?

Why don't you just read through the code for those implementations?

I know how to do it, but don't know a name for it other than "gray out the page and show a popup on top of it".

Here's one way to gray out the page: http://forums.devshed.com/css-help-116/darken-site-for-loading-443500.html
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lwfukAuthor Commented:
Kravimir: The demo doesn't do what lightbox does. I want the html page to pop-up and be displayed at full contrast whilst greying out the content underneath.
0
 
David S.Commented:
That's the point. It's only part of the puzzle.
0
 
lwfukAuthor Commented:
I need a solution - not a puzzle.
0
 
lwfukAuthor Commented:
I researched the problem myself in the end and found the following solution. I modified the javascript and CSS to make a full screen popup. The effect is based on a full screen div element with alpha tranparency. See http://www.codeproject.com/KB/scripting/transparentpopup.aspx for the original script.

Regards,

Adrian Smith


<html>
<head>
<title>Your Page Title</title>
<!--You can just add some CSS code to the top of your page below the <head>, to make a CSS class in order to customize the look of the pop-up. -->
<!--The part the code above of interest to you, is the 3rd line: filter:alpha(opacity=80);. This line makes the popup transparent with the opacity value set to 80-->
<!--You can set the opacity within 0 - 100. If you set to 0, you won't see the popup. -->
<style type="text/css">
.transparent {
	filter:alpha(opacity=80);
	background-color:#B7CEEC;
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	color: navy;
	border: 1 red solid;
}
</style>
<!--Add some JavaScript right below the CSS above. This code above uses only 2 functions, one to display the pop-up and another to hide the pop-up. -->
<script>
/* this function shows the pop-up when
user moves the mouse over the link */
function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + 35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
//Popup.style.left = x;
Popup.style.left = 0;
/* set the pop-up's top */
//Popup.style.top = y;
Popup.style.top = 0;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<!--The last part is placing the function into the body of the page-->
<a href="" onMouseOut="Hide()" onMouseOver="Show()" onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse is still over the link.
<div id="Popup" class="transparent">
  <div style="background-color:#C3FDB8"> <b>Title goes here</b></div>
  <div>Description goes here</div>
</div>
</body>
</html>

Open in new window

0
 
lwfukAuthor Commented:
Sorry - I wished to select my own solution and I didn't want to cancel the question.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now