Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

How to use jquery.popup.js?

R_JR_J Cheerleader & TroubleshooterMunich Moderator

In the source I found that link: http://famspam.com/facebox/ which now is dead and https://github.com/defunkt/facebox seems to be the successor. Right at the beginning is shown what I try to achieve:

<a href="#terms" rel="facebox">Terms</a>
  Loads the #terms div in the box

I do not want to load an external page, but only display something that I would like to prerender (and hide) on that page so that I can use a fancy popup for it.

That's what I've tried so far:

<div id="TestPopup" style="display:none;">Test gelungen!</div>
<a href="#TestPopup" class="Popup" rel="Popup">test</a>

<script type="text/javascript">
    jQuery.popup({ div: '#TestPopup' })
</script>

The script at the end opens an empty popup. :(
Clicking the link opens the current page in the popup :(

The beginning of the jquery.popup.js shows that information: This is a highly modified version. Does it mean its functionality is stripped down that far? Why?

Is it possible to use something like an alias classname in order to quickly test if the "original" version could be used as a drop in replacement?


Since it is possible to open an empty popup, it should be possible to add some div contents to that empty box, shouldn't it? In order to do so, the popup creation must be observed, but how should I know if I have to insert div#this or div#that?

Comments

  • hgtonighthgtonight ∞ · New Moderator
    edited July 2015

    From reading /js/library/jquery.popup.js from Vanilla 2.1.11, I am not seeing a "clean" way to insert a popup via the jQuery .popup function.

    You should be able to call the popup function on your element. Then hook into the PopupReveal event and populate it with your pre-rendered data.

    jQuery(document).ready(function($) {
    
      $('body').on('popupReveal', function() {
        // find the popup using your favorite jQuery method
        var foundElement = null;
        $(foundElement).html(gdn.definition('prerenderDataPopup'));
      }
    
    }
    

    EDIT - I would personally just create a function to reveal the popup and pre-render the entire overlay markup along with the form. Sure you have to write your own custom click handler, but that is cheesy-easy.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator
    edited July 2015

    I do not understand what I see in the js file :(

    But I saw that example jQuery.facebox('something cool', 'my-groovy-style'); and tried to do the same with the popup script.

    jQuery.popup( '','some text' ); displays some text, though I do not know what the purpose of the first string is...

    So I ended up with this:

    <div id="SomeData" style="display:none;">Yeah!</div>
    <a href="#SomeData" class="MyPopup">test</a>
    
    <script type="text/javascript">
    $( '.MyPopup' ).on( 'click', function() {
        var infoContainer = $( this ).attr('href');
        jQuery.popup( '', $( infoContainer ).text() );
    });
    </script>
    

    EDIT: I cleaned it up just a little bit...

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    @hgtonight said:
    EDIT - I would personally just create a function to reveal the popup and pre-render the entire overlay markup along with the form. Sure you have to write your own custom click handler, but that is cheesy-easy.

    Now that I've read your answer 10 times, I believe I did what you have advised, nor? :confused: :lol:

    I wish my JavaScript skills would be half as good as your German skills... ;)

  • hgtonighthgtonight ∞ · New Moderator
    edited July 2015

    @R_J said:
    I do not understand what I see in the js file :(

    But I saw that example jQuery.facebox('something cool', 'my-groovy-style'); and tried to do the same with the popup script.

    jQuery.popup( '','some text' ); displays some text, though I do not know what the purpose of the first string is...

    So I ended up with this:

    &lt;div id="SomeData" style="display:none;">Yeah!</div>
    &lt;a href="#SomeData" class="MyPopup">test</a>
    
    &lt;script type="text/javascript">
    $( '.MyPopup' ).on( 'click', function() {
        div = $( this ).attr('href');
        jQuery.popup( '', $(div).text() );
    });
    &lt;/script>
    

    I didn't notice that at first glance!

    The first argument is a settings object. You can specify a few members:
    confirm, popupId, followConfirm, deliveryType, afterConfirm, mouseoverClass, targetUrl, popupHtml, confirmHtml, containerCssClass, onUnload, confirmHeading, confirmText, onLoad, afterLoad, hijackForms, onSave, and afterSuccess.

    There is a short explanation for most of them starting on line 318.

    @R_J said:
    Now that I've read your answer 10 times, I believe I did what you have advised, nor? :confused: :lol:

    Yes :)

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

Sign In or Register to comment.