How to use jquery.popup.js?

R_J · July 2015

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?

Bleistivt · July 2015

Look how the confirm popup does it:
https://github.com/vanilla/vanilla/blob/master/js/library/jquery.popup.js#L360

hgtonight · 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.

R_J · 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_J · July 2015

@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?

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

hgtonight · 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?

Yes

How to use jquery.popup.js?

Answers