coding *****s - how to do this on a webpage?

D

dconstrukt

Registered Member

Sep 5, 2010

58

10

• May 29, 2011

• #1

hey guys.... i'm trying to add a lightbox overlay on a page i have and i want the lightbox to show when the page loads.

i have the html for the overlay pop and the main html page.

The user should be able to click a text link on the html overlay and then it should fade out to the page underneath.

any idea how to do this?

tried google but didnt find anything like i needed.

 

P

pyrogod117

Registered Member

Jul 10, 2010

52

16

• May 29, 2011

• #2

Well the click a link part to close the light box is simple. Look at how it closes when you click off of it on a normal page. To load the lightbox when the page loads, try reading this page THOROUGHLY

Code:

hxxp://***.dmxzone.com/forum/topic/43596/

(Replace *** with www and hxxp with http)

It's more beneficial to try and do this on your own than it is for me to do it for you. If I do it, you won't learn. If you piece it together yourself, you'll remember. Feel free to try it and if you can't get it to work, post back here with what you've done so far and what's going wrong.

Hope that helps

 

N

nick5014

Junior Member

May 11, 2011

100

21

• May 29, 2011

• #3

Have you already figured out how to get the overlay to appear in the first place? You want a div with an opaque background colour with width: 100% Then all your text and links are inside this div.

To close the overlay you are going to need a little javascript and a bit of css. Basically what you want to do is make the overlays css property "display: hidden" once you click on the text link. Also use javascript to do the fade effect.

To make it a little fancier I would also use javascript to get the overlay to appear/fade in after a few seconds using a delay.

If you need more help/the code let me know.

 

D

dconstrukt

Registered Member

Sep 5, 2010

58

10

• May 30, 2011
• Thread Starter Thread Starter

• #4

no dude... this stuff is like greek.... i am lost.

just need to know what to do by someone who isn't a programmer... they speak in non english words and shit.

 

N

nick5014

Junior Member

May 11, 2011

100

21

• May 30, 2011

• #5

lol, try going to (http) bit.ly/k5XvWK

There is a decent tutorial there. But if none of it makes sense to you, you might be better looking for a wordpress plugin that does it (if you are using wordpress)

 

D

dconstrukt

Registered Member

Sep 5, 2010

58

10

• May 30, 2011
• Thread Starter Thread Starter

• #6

yeah just need to figure out how to make the thing show automatically when the page loads

 

N

nick5014

Junior Member

May 11, 2011

100

21

• May 30, 2011

• #7

remove in your css file, the bit thats says, display: none

 

D

dconstrukt

Registered Member

Sep 5, 2010

58

10

• May 30, 2011
• Thread Starter Thread Starter

• #8

yeah copied everything just like he shows on the tut but its not working...

shouldn't be that difficult to do either.

 

P

pyrogod117

Registered Member

Jul 10, 2010

52

16

• May 31, 2011

• #9

Show us what you have so far, and then we can help. You can put it on a blank page for all I care. Don't have to show us what you're doing it for.

 

B

Baybo.it

Registered Member

Aug 9, 2011

73

40

• Aug 10, 2011

• #10

The best JS framework for this is jQuery. There's a few plugins you can use (jQuery lightbox comes to mind).

The code would be:

Code:

$(document).ready(function() {
$("#popup").show()
$("#popup-button").click(function() {
    $("#popup").hide();
});
});