HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Opening popup programatically

I'm looking for a way to open a vanilla popup overlay type window programatically, via javascript or other means. something similar to window.open("myfavortieurl","Popup");

i'm not looking for how to format a link on a page for it to launch in a popup target, i don't have trouble there.

Thanks in advance.

Comments

  • Good question, you wan to to avoid opening actual windows.

    I take it you already know this:

    Anchor(T('Link Text'), 'vanilla/uri', 'Popup');
    

    You can simply

    $(element).popup();
    

    it will look for the href attr

    You can

    $.popup({}, gdn.definition('YourMessage'));
    

    You can include a heading

    <h1>Heading</h1><p>Message</p>

    grep is your friend.

  • hbfhbf wiki guy? MVP

    That will set an anchor on the page to display in a popup when clicked, right? I guess from there I could use js to 'click' the link, but I was curious if there was a more direct path.

  • peregrineperegrine MVP
    edited October 2013

    no clicking or anchor involved.

        $('.BodyID').popup();
           $.popup({}, gdn.definition('YourMessage'));
    

    paste in your console and run it for a test.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • hbfhbf wiki guy? MVP

    @peregrine said:

    no clicking or anchor involved.

    $('.BodyID').popup()
    $.popup({}, gdn.definition('YourMessage'));

    paste in your console and run it for a test.

    Oh, fantastic! I'm not at a real browser at the moment, but I will try it out tonight.

  • peregrineperegrine MVP
    edited October 2013

    themehook

    you may need to fiddle with the .css element for .Popup

          <?php if (!defined('APPLICATION')) exit();
    
        class hbfthemeThemeHooks implements Gdn_IPlugin {
    
            public function Setup() {
                return TRUE;
            }
    
            public function OnDisable() {
                return TRUE;
            }
    
    
        public function Base_Render_Before($Sender) {  
    //  just an example for an if conditional load of js  
    if (($Sender->MasterView == 'default' || $Sender->MasterView == '')) {
        $Sender->AddJsFile('mynew.js', 'themes/hbftheme/js');
        }
        }
    

    mynew.js

        jQuery(document).ready(function($) {
        $('.BodyID').popup()
        $.popup({}, gdn.definition(' YourMessage '));
        });
    

    someone may want to improve on this. but here is a start.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • I like how jquery.ui.dialog handles things. It is a lot more intuitive and the popup code could be adapted to use it.

    I'm not a huge fan of using every jquery.ui widget under the box, but that is good one.

    grep is your friend.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I used this on my PrivacyNotice plugin, to popup the notice on the same page. Works really well.

  • @vrijvlinder said:

    I used this on my PrivacyNotice plugin, to popup the notice on the same page. Works really well.

    certainly easier to enable and disable then the themehooks.

    http://vanillaforums.org/addon/privacynotice-plugin&gt; @vrijvlinder said:

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • hbfhbf wiki guy? MVP
    edited October 2013

    via console, i've been working my way through this.

    it seems like im close, but the popup does not open. It would appear that I've got the correct selector, because it echos back the right tag. but then nothing.

    $('.P > a:first').popup();
    Object [<a href="/entry/signin?Target=discussions" class="Button SignInPopup">ev
    ]
    

    if i then enter $.popup({},"Hi");

    a popup opens but it only contains the word "Hi".

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I had something similar happen , did you try using the full url ?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited October 2013

    jQuery.popup(options, data); simply calls the function with whatever options and data you pass it. Meaning that these two $('.P > a:first').popup(); and $.popup({},"Hi"); have nothing to do with one another. I've been working on refactoring our Popup plugin and whilst reading through the source haven't found a way to programatically set a target URL. The target is in fact pulled directly from the href value of a link (or the closest parent link) so this might well be the best workaround for now (like you originally pointed out):

    $('.Link').popup(); // Attach the popup function to a link
    

    ...and then later on:

    $('.Link').click(); // Trigger the 'click' event, effectively also triggering the popup
    

    P.S.: You could also create the element in Javascript without appending it to the DOM and then go from there.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • hbfhbf wiki guy? MVP

    thanks Kasper, the click was what was needed.

    In fact, since via the theme i had already associated that anchor tag with a popup, looks like all i need to do on this one is call click....

Sign In or Register to comment.