Popup Block Tutorial

Here's a quick walk-through on how it get a basic page link to load into a popup:

1) Add the popup block to your page (the page that has the link on it, not the page that will be opened).  Just keep all the default settings.  It should say "Based on link: Class Name" and next to it, have the words "popupLink" in that field.  It also should have "Main" as the area name.  This is the area that will be shown in the popup.

2) Create your popup page (anywhere on your site), and put some content in the "Main" area.  This will be your popup page. In this example, my popup page has a url of /my_popup_page/.  Exit edit mode.

3) Add "popupLink" Classname to your link: Go back to the first page, add/edit the Content block that will have the link to the popup.  Select the text that you want to turn into the popup link, and click the link icon (the chain icon circled below).  Add the url of the popup page (the next image below), then click on the advanced tab, and enter the word "popupLink" in the Classes field (the third image below).  Then click the update button of both edit-dialog windows to save your changes.

4) You're Done!   Take your page out of edit mode, and it should now work when you click the link.

 

Javascript within Popups

By default the popup block doesn't fully support some interactive blocks that rely on javascript to function. This is because the javascript within those blocks is initiated during the pageload event, and by the time they are loaded via the popup, the pageload event has already been fired. There are two ways that you can try to circumvent this issue:

1) You may want to experiment with the IFrame option in the popup block, since this will fire an onload event for content within the popup window.  However, a trade-off of using IFrames is that other javascript libraries, css, and other elements on the page will be inaccessible to the popup content.  Because of this you need to make sure that any required libraries (just as jquery) are included within the the targetted area. This can be done with an HTML block on the page that you are loading. 

2) You can call the javascript that initiates your after the window has opened.  This can be done by hooking into document level event named 'popup' that is fired when the popup has loaded:  $(document).bind('popup',function(){ 
     //your code goes here
});

« Back to the Popup Block project page

Like this post?
Tweet This

Enjoy this post?