WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Have link open a popup window in a smaller size (31 posts)

  1. Chris
    Member
    Posted 9 months ago #

    Hello,

    I know this has been asked repeatedly and answered even more times, but none of those worked for me. I've installed 4 plugins and none work... I've tried all of the code suggested and none work. Sorry for being blunt, but reading through all of those posts (and there were a lot!) people started getting rude because the same question was being repeated. I'm scared to keep downloading plugins because I do not want to mess up my page! My question is:

    How do I have a link on my WordPress page open up into a smaller window? Not a new tab. I've tried all of the "target=....." and NONE work!!

    The page I am trying to fix is: http://www.website-startup.com

    As an EXAMPLE:

    If you scroll down just a tad, under the video is a heading: User-Friendly CP
    There is a link in the first sentence: Control Panel

    Say, just for example, I would like that link to open up into a smaller window with my original page behind it. How can I do this?

    If you suggest a plugin, please check to see if it compatible with WP 3.6.1 because the ones that were suggested in other posts were only compatible with 3.5.2 and the ones that claimed to be compatible with 3.6.1 did not work and I would rather not install any more plugins that do not work.

    I would GREATLY appreciate any suggestions or any code that you have to offer. Please understand that I am not very good at coding, I only know what I have researched and am self-taught. I beg you to forgive my ignorance.

    Anyone who provides a working solution, I will gladly wrestle an alligator diagnosed with lockjaw for your amusement! :-)

    ~Chris

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    You can do this using a little jQuery. I am going to assume you are using a child theme or your own custom theme so it is OK to customise. If you are not, you should make a child theme.

    In your child theme's folder create another folder called js (unless your theme already has a js folder) and within that folder create a new file called popup.js
    Paste into that file the following:

    jQuery(document).ready(function($) {
       $('.popup').click(function() {
         var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
         if (window.focus)
         {
           NWin.focus();
         }
         return false;
        });
    });

    In your child theme's functions.php add the following:

    //* Register and Enqueue scripts for popup
    function cc_popup_script() {
    	wp_register_script( 'popup', get_stylesheet_directory_uri() . '/js/popup.js', array( 'jquery' ), '1.0.0', false );
    	wp_enqueue_script( 'popup' );
     }
    
    add_action('wp_enqueue_scripts', 'cc_popup_script');

    Once you have added the code above, you can now use this in your page/post content by attaching a class of 'popup' to any link you want to open in a popup. For example

    <a href="http://cubecolour.co.uk/wp" class="popup">popup example page</a>

    It would also be easy to also make this into a plugin which should be tidier than adding to the theme.

  3. Chris
    Member
    Posted 9 months ago #

    THAT IS AMAZING!!! It worked EXACTLY as you instructed! I am forever in your debt, Kind Sir!! I only hope that my page doesn't get all messed up when I uninstall all of those plugins that wouldn't work...

    THANK YOU! :-)

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    Looking forward to seeing you wrestle that alligator ;o)

  5. Chris
    Member
    Posted 9 months ago #

    Not to bother you again, but I do have another question:

    In the 'popup.js' file, the line:

    var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');

    Can you please explain to me how to set it to where I can define the height & width for different links? To explain it in my dumb way (I am trying to be as thorough as possible)

    For instance:

    xHeight=myHValue
    xWidth=myWValue

    What I am trying to accomplish:

    var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=xHeight,width=xWidth');

    This way I can define the H x W for each link. I have dozens that I need to do this for...

    I'm sorry if this is very bad coding practices and probably incorrect, but this is the best that I can do....for now.

    Thank you, again, for your help!

    Chris

  6. Chris
    Member
    Posted 9 months ago #

    I am looking for the smallest one that I can find! I will be packing a can of mace just in case! ;-)

  7. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    To achieve this, the code could be put into a plugin & extended to use a WordPress shortcode with some parameters to allow the dimensions to be set for each link. It shouldn't be a complicated plugin to create.

  8. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    I've now made a plugin to do this. I just need to do a little more testing on it & tidy it up a little before releasing it.

    To make a link with this plugin once I release it, you can add a shortcode to your page/post content and include parameters for link url, height & width:

    [popup url="http://cubecolour.co.uk/wp" height="300" width="300"]Link Text[/popup]

    The popup would be much the same as before, but using the height & width values set in the shortcode, and with a default value used if those parameters are not set.

    Does this sound like it might do the job for what you are trying to do?

  9. Chris
    Member
    Posted 9 months ago #

    That is EXACTLY what I was hoping to accomplish! To be honest, when I read your last post, my jaw dropped! I was thinking: "It would take me a thousand years to write a plugin. And even then, it still probably wouldn't work." And when I got the email this morning that you had already written one, I was like: "Are you kidding me? That fast???" I thought writing a plugin would take months to do...
    I don't mean for this to sound greedy, although it will, but is there a way to set X and Y coordinates for positioning? It defaults to the upper-left corner, which is fine as wine. But if there was a way to also set the X and Y values (or have a default that could be set that would apply to all) that would be AWESOME!
    Thank you so much for this! I'm still in shock that this was done so fast! You ROCK!! :-)

  10. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    I think that can probably be done. Positioning the popups to centre of the screen might be appropriate. It might require the alligator to be a little larger though.

  11. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    Ok, I've added something to make the popup appear in the centre of the screen now.

    I've submitted the plugin to the WordPress.org plugin directory. It may take a short while to get reviewed and passed by the lovely people of the plugins review team.

    I'll post back once the plugin is available to install. You'll need to remove the stuff you added earlier before installing it as I've reused some of the same code in the plugin so it might crash your site to have both.

  12. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    The plugin is now live at: http://wordpress.org/plugins/alligator-popup/

    Don't forget to remove the code added earlier to your functions.php & remove the js/popup.js file before trying the plugin.

  13. Chris
    Member
    Posted 9 months ago #

    LOL! I cannot wait to try this!! I am going to remove all of the code I added earlier and then install this plugin. Love the name, btw!! :-)

    As per our agreement, I shall wrestle any alligator of your choosing... Inside a tank of hungry piranha. After I cut myself shaving.

    And after that win--because I don't plan on losing--I'm going to track down that croc from the movie "Lake Placid" and punch him square in the face to get another fight started.

    You, Sir, are AWESOME!!! :-)

  14. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 9 months ago #

    Cheers Chris

    Unfortunately the only alligator I know by name is Wally Gator but I don't think he'd be much of an opponent as he was never particularly frightening and is probably quite old now.

    When you have had a chance to try the plugin, post back here if you have any problems. I've tested it on a couple of my own sites & it's working for me so far.

  15. Chris
    Member
    Posted 9 months ago #

    I've tried it using several different links and dimensions, and I have not run into a single problem! It works PERFECTLY!! I can't thank you enough!! :-)

    And I think Wally Gator would be a fun challenge. He doesn't look like he'd cause me too much damage, which is what I was hoping for. ;-)

  16. chrissmit
    Member
    Posted 8 months ago #

    Hi all,

    I was looking for a plugin like this, and think this could use more promotion.

    Excellent!
    Thanks Chris for initiating this, and CubeColor for creating it.

    It could have a bit more explanation. E.g.

      There are no settings for this plugin.
      Copy-Paste the [popup url="http://URL_You_Want_To_Pop-Up" height="500" width="800"]Text You Want Displayed[/popup] in any post/page you want.

    Other than that, GREAT plugin. Works like a charm.

    Thanks for creating it.

  17. levlifeblogs
    Member
    Posted 4 months ago #

    Thank you!!

  18. anguscarter
    Member
    Posted 4 months ago #

    Hi guys,
    I agree great great plugin! I spent several hours looking for popup plugins, trying them out and getting extremely frustrated. It seems every other one was just designed to make very annoying ads, so its is very refreshing to find one that is not designed just to annoy people! Two things though....
    1st- I agree it could use more promotion, it never appeared while searching wp's plugin page but that could just mean wp's search hasn't caught up with how great this is.
    2nd- A very very humble request/suggestion if you choose to do a update in the future. That is, allow users to embed video, music, playlists directly into the popup instead of making a new page for the popup to link to. I know several people have been looking for something that can do this and that doesn't seem to be anything. So might be a nice addition. But again I'm just grateful for it now as is!
    Thanks a ton!

    -angus

    P.S. Cubecolour, you just seem like you have a great attitude which is wonderful for these forums! Trying to figure out my embed problem, I came across several forums where other members were just complete jerks and berated the whole concept while providing absolutely no help. So it was extra nice coming across this one, with such a entertaining/pleasant back and forth. You're the type of moderator/member we need more of on here! Again Thanks!

  19. esmi
    Forum Moderator
    Posted 4 months ago #

    @anguscarter: If you require assistance then, as per the Forum Welcome, please post your own topic.

    This topic has been resolved.

  20. indiadamjones
    Member
    Posted 4 months ago #

    I love this plugin. You guys are a geniuses.

  21. stuartbennett2012
    Member
    Posted 4 months ago #

    I want to create a Popup window on my wordpress site my theme is "OptimizePress V2.1.8.1" I have certain pages on my site that I want to put these popups on.

    In Dreamweaver you use a behaviour called "Open Browser Window" to create the effect I am looking to create and it lets you set exact width and height of the new window and whether to have toolbars scrollbars etc show in the new window etc.

    I just want to know how to set this up on my site within my current theme.

    Any ideas?

  22. daryous_1
    Member
    Posted 3 months ago #

    @cubecolour:
    how can I make the scripts you mentioned above in the first reply, to open all external links in popup window automatically?
    I'm using a permalink that is referring to the original article from other websites, so it is kind of impossible for me to apply that script for every post individually.
    I tried a script that opens all external links into a new window. That is great, but still not satisfying for me.

  23. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 3 months ago #

    daryous_1 if you look at the script that is enqueued in the solution given in my original reply:

    jQuery(document).ready(function($) {
       $('.popup').click(function() {
         var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
         if (window.focus)
         {
           NWin.focus();
         }
         return false;
        });
    });

    It is targeting elements with the class .popup as this is defined in the line:

    $('.popup').click(function() {

    to make ALL links open in a popup, you can try targeting any anchor tag rather than any elements with the popup class by changing that line to

    $('a').click(function() {

    however I expect this will be no good for your requirements as all links including internal ones will now open in a new window.

    Consequently we need a way to limit this to external links only.

    To target just external links, that line can be changed to

    $("a[href*='http://']:not([href*='"+window.location.hostname+"'])").click(function() {

    I've not tested this, but I think it should work as a modification of the solution I gave for the original question.

    This should really be wrapped up into a plugin, a forked version of the alligator popup plugin I created as a result of this topic with the change outlined above and the shortcode bits removed would probably be ideal.

    Alternatively you could add the code to a child theme, but it is generally a bad idea to add custom functions like this to a theme if you are not using a child theme.

  24. daryous_1
    Member
    Posted 3 months ago #

    @cubecolour
    you are the KING...
    one last question: how do I change the popup window theme (the browser theme) into a beautiful one (like lightbox or fancybox)?

  25. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 3 months ago #

    that is not possible with this kind of popup as this technique creates a new browser window whereas a lightbox or fancybox popup creates an overlaid div inside the current window which can be targeted with css rules.

  26. daryous_1
    Member
    Posted 3 months ago #

    Thank you, is that hard to do for external links?
    I mean, I have lightbox, but how can I let all external links open in lightbox automatically?

  27. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 3 months ago #

    There may be a way to use the snippet of jQuery I posted to target external links to trigger the lightbox, but you will need to ask the developer of the particular lightbox plugin you're using.

  28. daryous_1
    Member
    Posted 3 months ago #

    @cubecolour
    The lightbox creates a class called "lpb_secondary". so if we add this class to Alligator popup, we might get what I want. but I don't know how to add a "class" to the plugin.

  29. tabufx50
    Member
    Posted 3 months ago #

    Dude awesome plugin!

    Hey wanted to ask if there was an option to have it open another url in main parent window, at the same time the pop up opens!

    In other words, you click on the text or button, the pop up window opens and then the main page (your blog) opens up another site below the plugin?

    Thanks

  30. Tom McLellan
    Member
    Posted 3 months ago #

    @cubecolour - awesome plugin! Thank you!

Reply »

You must log in to post.

About this Topic