#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    9
    Rep Power
    0

    Text box pop up - Just learning JS


    I want to create a popup box containing text from a link. The idea is, I will have a page with several links, and when someone clicks on a link, it will bring a box up with a block of text. Sometimes, this may need to scroll.

    I don't want it to pop up in a new window. Instead, I want it to come up on the same page "on top" of the other content, and dim the page behind it. I have seen this before, but don't recall where. I have also seen sites do it with images of products., but also can't think of examples.

    My question is, what is this called? I would also like some suggestions on going about this since I am just starting to learn javascript.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    9
    Rep Power
    0
    See, I didn't know that was called a lightbox. No need to be snarky. I did say I was just learning, right? I don't want to be "spoon fed" answers, I want to be pointed in the right direction to learn on my own. It helps to know the terminology, which is why I asked.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    If you choose to use jQuery (it's a certain amount of overhead), I recommend these lightbox plugins:

    ColorBox
    http://www.jacklmoore.com/colorbox

    jQuery Tools Overlay
    http://jquerytools.org/demos/overlay/
    http://jquerytools.org/documentation/overlay/
    https://github.com/jquerytools/jquerytools

    Facebox
    http://jdmweb.com/resources/FaceBox
    https://github.com/defunkt/facebox


    Yes, web_loone08 that does seem unnecessarily snarky when he clearly asked what the term for it is.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    9
    Rep Power
    0
    I am tinkering with Colorbox right now. Looks like it will do everything I want it to! Thanks, guys, for all the help!
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    @rtuite and @Kravvitz: I was not being "snarky". No one was helping you rtuite, so be glad that I did. I was just sending you to search results. Not feeling much appreciation on this one. Just be happy someone was nice enough to point you in the right direction.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by web_loone08
    @rtuite and @Kravvitz: I was not being "snarky". No one was helping you rtuite, so be glad that I did. I was just sending you to search results. Not feeling much appreciation on this one. Just be happy someone was nice enough to point you in the right direction.
    All right, you didn't intend to be snarky, however, rtuite perceived it as such and I can see how.

    It's a combination of linking to lmgtfy.com and not writing any sentences in your response. So you might want to avoid that in the future.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    I just recently found out about lmgtfy.com and I like it; I think it's a neat little animation; so I probably will still use it in the future . As far as the links I post; it's to help out the OP... without me having to re-invent the wheel, but for all future references... for any OP (that I assist)... using lmgtfy.com to redirect them to Google results or me posting a link; to a tutorial/example/demo... this is not me being "snarky" . On a positive note... that's a new word, that I am adding to my vocabulary (I had to look up it's meaning, on lmgtfy.com... lmbo) .
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    9
    Rep Power
    0
    Ok, I appologize for getting bent out of shape. But, that tool was originally created by someone who got tired of people asking him stupid questions that are easily answered by searching Google.

    It generally implies that you think the asker is stupid and incapable of using Google.

    If you didn't intend it this way, I am sorry again for getting irritated. As you clearly didn't deserve it.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    9
    Rep Power
    0
    Also, it was your post that got me on the right track, so thanks for your help!
  20. #11
  21. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by rtuite
    Ok, I appologize for getting bent out of shape. But, that tool was originally created by someone who got tired of people asking him stupid questions that are easily answered by searching Google.

    It generally implies that you think the asker is stupid and incapable of using Google.
    I did not mean it that way... my apologies, as well.

    Originally Posted by rtuite
    Also, it was your post that got me on the right track, so thanks for your help!
    Your welcome, glad I could help you out.

IMN logo majestic logo threadwatch logo seochat tools logo