Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Apr 2016
    Posts
    23
    Member #
    53773

    How do you make a text link that opens a pop up window or lightbox?

    Here's what I want, but I'm not sure how to do it:

    I want to put a link in my sidebar widget that says something like "Lesson 23". And when someone clicks on that text link I want a pop up window, or lightbox as some call it, to open with the text for that lesson. The pop up window might be something like 400 x 600px or so.

    Does anybody know the code I would need to put into my sidebar widget to accomplish this?

  2.  

  3. #2
    Junior Member Krazyhawk's Avatar
    Join Date
    Feb 2016
    Location
    IL, USA
    Posts
    23
    Member #
    53438
    Liked
    7 times
    Probably use the window.open() JS method. -> Window open() Method

    So your link would be something like <a href="" onclick="window.open(URL, params, etc)></a>

    Of course you would also have to de event.preventDefault() as well to stop the link from doing what it naturally does.

    Hope this helps

  4. #3
    Junior Member
    Join Date
    Apr 2016
    Posts
    23
    Member #
    53773
    I wish it did, but I'm not very knowledgeable on code. I was hoping someone could give me the entire code that I would need so that I could copy and paste it into my sidebar via a text widget.

  5. #4
    Junior Member
    Join Date
    Dec 2015
    Posts
    11
    Member #
    52700
    Liked
    1 times

  6. #5
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times
    Here you go this should point you in the right direction

    and this
    Last edited by Fireproofgfx; May 30th, 2016 at 11:24 AM.

  7. #6
    Junior Member
    Join Date
    Apr 2016
    Posts
    23
    Member #
    53773
    You could try bootstrap modal or bootboxjs
    I tried that code in Notepad++ and I can not get it to work.

    One of them that Fireproof shared (http://www.htmliseasy.com/popup/popup1.html) is more like what I'm trying to do. But for some reason I can't get the code to work for me. I put it into Notepad++ and I link to an html page that I created called "lesson-text2.html".

    I currently just have this page in a folder on my desktop which is the same place where I saved this code file. But I must be doing something wrong because when I open it in a browser I can see my text that says "lesson text", but it isn't linking to the other page like it's suppose to. Could somebody tell me what I did wrong - here is my code:

    <!Doctype html>
    <html>
    <head>


    <script type="text/javascript">

    function popup(lesson-text2.html){
    cuteLittleWindow = window.open("lesson-text2.html", "littleWindow", "location=no,width=320,height=200");
    }

    </script>

    <a href="javascriptopup(lesson-text2.html)">Lesson Text.</a>

    </head>
    </html>

  8. #7
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times
    If that is your code, your code is incorrect, the closing head tag is in the wrong spot and there is no body.

    HTML Code:
    <html><head><title></title>
    <script type="text/javascript">
    function popup(url){  cuteLittleWindow = window.open(url, "littleWindow", "location=no,width=320,height=200");}
    </script>
    </head><body>
    <p><a href="javascript:popup('red.html')">Here is a red popup.</a><br><a href="javascript:popup('blue.html')">Here is a blue popup.</a></p>
    <p>They both use the same function, we just pass different things <i>to</i> the function. You can do this with any or all of the parameters of the popup window.</p>
    </body></html>

  9. #8
    Junior Member
    Join Date
    Dec 2015
    Posts
    11
    Member #
    52700
    Liked
    1 times
    You have forgotten to close the quote after "lesson-text2.html".
    And like fireproofgfx said, your anchor tag used to call javascript function should be inside body tag. Maybe it will work after you correct them.

  10. #9
    Junior Member
    Join Date
    Dec 2015
    Posts
    11
    Member #
    52700
    Liked
    1 times
    Also, I don't you need to add url name inside function. Just use:
    function popup(){ }

  11. #10
    Junior Member
    Join Date
    Apr 2016
    Posts
    23
    Member #
    53773
    Ok, this code seems to work:

    <!Doctype html>
    <html>
    <head>
    <title>lightbox</title>
    <script type="text/javascript">

    function popup(){
    cuteLittleWindow = window.open("lesson-text2.html", "littleWindow", "location=no,width=500,height=500");
    }

    </script>

    </head>
    <body>
    <a href="javascriptopup()">Lesson Text.</a>
    </body>

    </html>
    How would you center the lightbox in the center of the screen?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 04:24 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com