The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

A Popup module for your forum

2 posters

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial A Popup module for your forum

Post by Ange Tuteur September 11th 2015, 10:53 am

A Popup module for your forum


This tutorial will help you setup a popup module for your Forumotion forum, such as in the example below.

A Popup module for your forum Exampl10

The popup can be used for anything, such as quick viewing of notification content, searches, and previews.. It'll work on any forum version, save for a few differences in display.

Quick Navigation :

  1. Installing the Popup
  2. Installing the Theme
  3. Installing Plugins



A Popup module for your forum 09615110 1. Installing the Popup



To install the popup, go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : FA Popup
Placement : In all the pages
Code:
(function() {
  var version = 0;
  /* COMPATIBLE FORUM VERSIONS
  ** 0 : PHPBB2
  ** 1 : PHPBB3
  ** 2 : PUNBB
  ** 3 : INVISION
  */
  
  if (!window.FA) window.FA = {};
  if (FA.Popup) {
    if (window.console) console.warn('FA.Popup has already been initialized.');
    return;
  }
  
  FA.Popup = {

    lang : {
      button_close : 'X',
      default_title : 'Popup',
      loading : 'Loading...',

      error_getPage : 'An error occurred while getting the page. Please try again later.',
      error_connection : 'A connection error occurred. Please check your internet connection and try again later.'
    },
    
    active : false,
    
    forum : {
      version : version,
      content : version ? '#main-content' : '#content-container > table > tbody > tr > td[width="100%"]',
      pages : ['.gensmall:has(.sprite-arrow_subsilver_left, .sprite-arrow_subsilver_right) a[href^="/"], .nav:has(.sprite-arrow_subsilver_left, .sprite-arrow_subsilver_right) a[href^="/"]', '.pagination:not(strong) span a', '.paging a[href^="/"]', '.pagination a[href^="/"]'][version]
    },
    
    /* open a new popup window */
    open : function(href, title, callback) {
      if (FA.Popup.active) FA.Popup.close(); // close opened windows
      
      var box = document.createElement('DIV'),
          overlay = document.createElement('DIV'),
          content = document.createElement('DIV'),
          close = document.createElement('INPUT');

      close.type = 'button';
      close.value = FA.Popup.lang.button_close;
      close.className = 'fa_popup_button fa_popup_close';
      close.onclick = FA.Popup.close;

      content.id = 'fa_popup_content';
      content.innerHTML = '<div class="fa_popup_loading">' + FA.Popup.lang.loading + '</div>';
      
      overlay.id = 'fa_popup_overlay';
      overlay.style.zIndex = '99998';
      overlay.onclick = FA.Popup.close;

      if (FA.Popup.forum.version == 2) box.className += ' pun';
      box.id = 'fa_popup';
      box.style.zIndex = '99999';
      box.innerHTML = '<div class="fa_popup_title">' + (title ? title : FA.Popup.lang.default_title) + '</div>';
      box.appendChild(close);
      box.appendChild(content);

      if (href) {
        $.get(href, function(data) {
          content.innerHTML = '';
          if (callback) callback(data, content);
          else {
            var main = $(FA.Popup.forum.content, data)[0];
            if (main) {
              content.appendChild(main);

              var page = $(FA.Popup.forum.pages, content);
              if (page[0]) page.click(FA.Popup.getPage);
            }
          }
        }).fail(function() {
          content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_connection + '</div>';
        });
      } else if (callback) {
        content.innerHTML = '';
        callback(content);
      }

      document.body.style.overflow = 'hidden';
      document.body.appendChild(overlay);
      document.body.appendChild(box);
      
      FA.Popup.active = true;
    },
    
    /* close an opened popup window */
    close : function () {
      var box = document.getElementById('fa_popup'),
          overlay = document.getElementById('fa_popup_overlay');
      
      box && document.body.removeChild(box);
      overlay && document.body.removeChild(overlay);
      document.body.style.overflow = '';
      
      FA.Popup.active = false;
    },

    
    /* get the page when a pagination link is clicked */
    getPage : function() {
      var content = document.getElementById('fa_popup_content');

      $.get(this.href, function(data) {
        var main = $(FA.Popup.forum.content, data)[0], page;

        if (main) {
          content.scrollTop = 0;
          content.innerHTML = '';
          content.appendChild(main);
          
          page = $(FA.Popup.forum.pages, content);
          if (page[0]) page.click(FA.Popup.getPage);
        } else {
          content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_getPage + '</div>';
        }
      }).fail(function() {
        content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_connection + '</div>' ;
      });
      return false;
    }
    
  };
})();

Modifications : This popup is developed for multiple versions, so it's imperative that you fill in the version variable at the top of the script, with the number that corresponds to your forum version !

0 : phpbb2
1 : phpbb3
2 : punbb
3 : invision

Please see the following topic if you do not know your forum version.
https://help.forumotion.com/t138414-how-to-identify-your-forum-version#937053


Depending on your language or preferences, you can also change a bit of text on the popup by modifying the lang object.
Code:
    lang : {
      button_close : 'X',
      default_title : 'Popup',
      loading : 'Loading...',

      error_getPage : 'An error occurred while getting the page. Please try again later.',
      error_connection : 'A connection error occurred. Please check your internet connection and try again later.'
    },

This script is essentially the "heart and soul" of the popup. To actually utilize it, you will need to install plugins which can be found later in this tutorial. Very Happy


A Popup module for your forum 09615110 2. Installing the Theme



So our popup actually looks like a popup window, you will need to add a bit of CSS to your stylesheet. Go to Administration Panel > Display > Colors > CSS stylesheet and choose the theme you prefer to install.

Light Theme : (Preview)
Code:
#fa_popup_overlay {
  background-color:#FFF;
  opacity:0.8;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

#fa_popup {
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background:#FFF;
  border-radius:3px;
  position:fixed;
  top:50px;
  left:12%;
  right:12%;
  bottom:30px;
  padding:3px;
  width:auto;
  overflow:hidden;
  box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4);
}

#fa_popup_content {
  border:1px solid #EEE;
  border-radius:3px;
  padding:3px;
  overflow:auto;
  height:90%;
}

.fa_popup_title {
  color:#333;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  border-bottom:1px solid #333;
  margin:8px 0;
  padding-bottom:2px;
}

input.fa_popup_button, a.fa_popup_button {
  color:#FFF !important;
  font-size:12px;
  font-weight:bold;
  text-indent:0;
  text-decoration:none !important;
  background-color:#39C;
  border:none;
  border-bottom:2px solid #17A;
  border-radius:3px;
  display:inline-block;
  line-height:20px;
  padding:0 6px;
  cursor:pointer;
  transition:300ms;
}

input.fa_popup_close {
  background-color:#E53;
  border-color:#C31;
  min-width:25px;
  position:absolute;
  top:2px;
  right:2px;
}

input.fa_popup_button:hover, a.fa_popup_button:hover {
  background-color:#333;
  border-color:#111;
}

input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus {
  background-color:#EB5;
  border-color:#C93;
  outline:none;
}

.fa_popup_error {
  color:#966;
  font-size:12px;
  background:#FEE;
  border:1px solid #ECC;
  border-bottom-width:2px;
  border-radius:3px;
  padding:9px 6px;
  margin:6px;
}

.fa_popup_friends {
  background:#EEE;
  border:1px solid #DDD;
  border-bottom-width:2px;
  border-radius:3px;
  display:inline-block;
  padding:3px;
  margin:3px;
  float:none;
  overflow:hidden;
}

#fa_popup .add_success { color:#8B5 }
#fa_popup .deny_success { color:#E53 }
#fa_popup .add_failed { color:#EB5 }

.fa_popup_loading {
  color:#333;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  padding:25px;
}

.fa_popup_more {
  text-align:center;
  margin:3px;
  clear:both;
}

/* data corrections */
#fa_popup_content > td { display:block }
#fa_popup.pun tbody.statused span.status { position:static }


Dark Theme : (Preview)
Code:
#fa_popup_overlay {
  background-color:#333;
  opacity:0.8;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

#fa_popup {
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background:#222;
  border-radius:3px;
  position:fixed;
  top:50px;
  left:12%;
  right:12%;
  bottom:30px;
  padding:3px;
  width:auto;
  overflow:hidden;
  box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4);
}

#fa_popup_content {
  border:1px solid #333;
  border-radius:3px;
  padding:3px;
  overflow:auto;
  height:90%;
}

.fa_popup_title {
  color:#999;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  border-bottom:1px solid #999;
  margin:8px 0;
  padding-bottom:2px;
}

input.fa_popup_button, a.fa_popup_button {
  color:#FFF !important;
  font-size:12px;
  font-weight:bold;
  text-indent:0;
  text-decoration:none !important;
  background-color:#17A;
  border:none;
  border-bottom:2px solid #058;
  border-radius:3px;
  display:inline-block;
  line-height:20px;
  padding:0 6px;
  cursor:pointer;
  transition:300ms;
}

input.fa_popup_close {
  background-color:#C31;
  border-color:#A10;
  min-width:25px;
  position:absolute;
  top:2px;
  right:2px;
}

input.fa_popup_button:hover, a.fa_popup_button:hover {
  background-color:#666;
  border-color:#444;
}

input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus {
  background-color:#C93;
  border-color:#A91;
  outline:none;
}

.fa_popup_error {
  color:#300;
  font-size:12px;
  background:#966;
  border:1px solid #855;
  border-bottom-width:2px;
  border-radius:3px;
  padding:9px 6px;
  margin:6px;
}

.fa_popup_friends {
  background:#444;
  border:1px solid #333;
  border-bottom-width:2px;
  border-radius:3px;
  display:inline-block;
  padding:3px;
  margin:3px;
  float:none;
  overflow:hidden;
}

#fa_popup .add_success { color:#8B5 }
#fa_popup .deny_success { color:#E53 }
#fa_popup .add_failed { color:#EB5 }

.fa_popup_loading {
  color:#999;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  padding:25px;
}

.fa_popup_more {
  text-align:center;
  margin:3px;
  clear:both;
}

/* data corrections */
#fa_popup_content > td { display:block }
#fa_popup.pun tbody.statused span.status { position:static }


Edit 2.1 Modifications and Information



Exclamation Note : Once the popup is installed it will get data from other pages asynchronously when it's called. If you use JavaScript to make modifications to posts, forums, etc.. there may be differences in the display of the content when displayed in the popup.

You can make corrections to the content displayed in the popup by modifying the elements with CSS. All you need to do is reference #fa_popup as the parent in your selector set. For example, we know many people modify the reputation system on posts with JavaScript, so if you wanted to hide the default vote system in the popup you would write the following css rule :
Code:
#fa_popup .post .vote { display:none }

Which sets the display state of the vote system in the popup to "none." There may be more than wanting to hide things, for example you may want to adjust the width of some content in the popup. If you cannot find how to do that you can always ask for our help. Smile


A Popup module for your forum 09615110 3. Installing Plugins



Now that you have the module and style installed, you're ready to install some plugins ! We've already prepared a few, so feel free to choose the one you want to install. Very Happy

Quick Navigation :

  1. Quick Notification Popup
  2. Search Popup
  3. Preview Popup



Edit 3.1 Quick Notification Popup



This plugin allows you to quickly view notifications you've received simply by clicking on the link !

A Popup module for your forum Pms10

To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.
1111111111111111111111111111111111111111111111
Title : Notifications Popup
Placement : In all the pages
Code:
$(function() {
    $(function() {
        if (!FA.Popup) return;
 
        // popup config
        FA.Popup.notif_config = {
            PMs: true,
            VMs: true,
            Groups: true,
            Replies: true,
            Reports: true,
            Requests: true
        };
 
        // language config
        var lang = {
                viewing_pm: 'Viewing PM from : ',
                viewing_wall: 'Viewing visitor messages',
                viewing_reply: 'Viewing reply from : ',
                viewing_request: 'Viewing friend requests',
                viewing_group: 'Viewing group',
                viewing_report: 'Viewing reports',
 
                more_pm: 'View all PMs',
                more_wall: 'Visit your wall',
                more_reply: 'View the whole topic',
                more_request: 'View your Friends and Foes',
                more_group: 'View group',
                more_report: 'View all reports',
 
                friend_added: 'Added',
                friend_denied: 'Denied',
                friend_error: 'Error',
 
                error_no_pm: '<b>Error :</b> The PM you tried to view could not be found. Please try using the button below to view your entire inbox.',
                error_no_wall: '<b>Error :</b> Your wall could not be accessed. Please try using the button below to view your wall.',
                error_no_reply: '<b>Error :</b> The reply you tried to view could not be found. Please try using the button below to view the entire topic.',
                error_no_requests: '<b>Error :</b> No friend requests could be found. Please try using the button below to view your Friends / Foes list.',
                error_no_group: '<b>Error :</b> The group you tried to view could not be found. Please try using the button below to access it.',
                error_no_report: '<b>Error :</b> The report page could not be accessed. Please try using the button below to access it.'
            },
            notif = document.getElementById('notif_list'),
            i;
 
 
        if (notif) {
            $(notif).click(function(e) {
                var node = e.target,
                    store, id, sender, more = document.createElement('DIV');
                more.className = 'fa_popup_more';
 
                if (node.tagName == 'A') {
                    id = node.parentNode.parentNode.parentNode.id.slice(1); // notif id
                    store = FA.Notification.getStore(); // notif data
                    sender = store[id].text.from.name; // username of sender
 
                    // PMs
                    if (/\/privmsg/.test(node.href) && FA.Popup.notif_config.PMs) {
                        FA.Popup.open('/privmsg?folder=inbox&mode=read&p=' + store[id].text.msg_id + '&nid=' + id, FA.Popup.lang.viewing_pm + sender, function(data, popup) {
                            var PM = $('form[action^="/privmsg"]:has(.postbody)', data)[0];
                            if (PM) popup.appendChild(PM);
                            else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_pm + '</div>';
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_pm + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
 
                    // Replies
                    else if (/\/t\d+/.test(node.href) && FA.Popup.notif_config.Replies) {
                        FA.Popup.open(node.href, FA.Popup.lang.viewing_reply + sender, function(data, popup) {
                            var reply = $('.post--' + store[id].text.post.post_id, data)[0];
 
                            if (reply) popup.appendChild(reply);
                            else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_reply + '</div>';
 
                            if (typeof FA_updatepostLike === "undefined")
                                $.getScript("https://illiweb.com/rs3/31/frm/jquery/likes/FA_Likes.js");
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_reply + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
 
                    // Visitor Messages
                    else if (/\/u\d+wall/.test(node.href) && FA.Popup.notif_config.VMs) {
                        FA.Popup.open(node.href, FA.Popup.lang.viewing_wall, function(data, popup) {
                            var wall = $('#profile-advanced-details', data)[0];
                            if (wall) popup.appendChild(wall);
                            else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_wall + '</div>';
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_wall + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
 
                    // Friend requests
                    else if (/page_profil=friendsfoes/.test(node.href) && FA.Popup.notif_config.Requests) {
                        FA.Popup.open(node.href, FA.Popup.lang.viewing_request, function(data, popup) {
                            var request = $((FA.Popup.forum.version == 2 ? '.main-content.frm dd' : '.friends-foes-list') + ':has(a[href^="/profile?deny"])', data);
                            if (request[0]) {
                                $(request).addClass('fa_popup_friends');
 
                                // accept / deny requests using AJAX
                                $('a[href^="/profile"]', request).click(function() {
                                    var t = this,
                                        add = /deny/.test(t.href) ? 0 : 1;
 
                                    $('a[href^="/profile"]', t.parentNode).hide();
 
                                    // success / error messages
                                    $.get(t.href, function() {
                                        $(t.parentNode).append('<strong class="' + (add ? 'add' : 'deny') + '_success">' + (add ? FA.Popup.lang.friend_added : FA.Popup.lang.friend_denied) + '</strong>');
                                    }).fail(function() {
                                        $(t.parentNode).append('<strong class="add_failed">' + FA.Popup.lang.friend_error + '</strong>');
                                    });
 
                                    return false;
                                });
 
                                $(popup).append(request);
                            } else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_requests + '</div>';
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_request + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
 
                    // Group requests
                    else if (/\/g\d+-/.test(node.href) && FA.Popup.notif_config.Groups) {
                        FA.Popup.open(node.href, FA.Popup.lang.viewing_group, function(data, popup) {
                            var group = $('form[name="post"]', data)[0];
                            if (group) popup.appendChild(group);
                            else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_group + '</div>';
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_group + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
 
                    // Reports
                    else if (/\/report/.test(node.href) && FA.Popup.notif_config.Reports) {
                        FA.Popup.open(node.href, FA.Popup.lang.viewing_report, function(data, popup) {
                            var report = $(FA.Popup.forum.content, data)[0];
                            if (report) popup.appendChild(report);
                            else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_report + '</div>';
 
                            more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_report + '</a>';
                            popup.appendChild(more);
                        });
                        e.preventDefault();
                    }
                }
            });
 
            for (i in lang) FA.Popup.lang[i] = lang[i]; // add language config to popup object
        }
    })
});

Modifications : This plugin is extensive and because of this it also has a lot of customization for you ! If you need to translate or change the wording you can find all the texts inside the lang object. Smile

As for the config you can find that in the FA.Popup.notif_config object. These settings take a boolean value of true or false. ( enabled or disabled ) They determine if the popup should show up for the specified notification type. For example, if you set Requests to false, the following popup would not show up when you click on the "friend request" link, instead you'll be taken to the friends / foes page.

A Popup module for your forum Friend10

Here's a quick explanation for each setting.

PMs : Enables quick viewing of PM notifications
VMs : Enables quick viewing of VM notifications
Groups : Enables quick viewing of Group Requests
Replies : Enables quick viewing of Watched topic, tagged, hash tag, etc.. replies to topics.
Reports : Enables quick viewing of post reports
Requests : Enables quick viewing of Friend Requests

Once you've set the config up the way you want, remember to save the script. After that you should now be able to quickly view notifications ! Very Happy



Edit 3.2 Search Popup



This plugin allows you to quickly perform searches without ever having to change the page ! You can even switch pages in the popup !

A Popup module for your forum Search10

To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Search Popup
Placement : In all the pages
Code:
$(function() {
  if (!window.FA.Popup) return;
  
  $('form[action^="/search"]').submit(function(e) {
    var keywords = this.search_keywords;
    
    FA.Popup.open('/search?' + $(this).serialize(), 'Searching' + (keywords.value ? ' : ' + keywords.value : ''));
    
    keywords.blur();
    e.preventDefault();
  });
});

Save the script and you should now be able to perform searches quicker than before !  Very good



Edit 3.3 Preview Popup



This plugin allows you to quickly view message previews without ever having to change the page !

A Popup module for your forum Previe10

To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Preview Popup
Placement : "In all the pages" OR if you want it only for quick reply "In the topics"
Code:
$(function() {
  if (!window.FA.Popup || !document.post || !document.post.message || !document.post.mode) return;
  
  document.post.preview.onclick = function(e) {
    var mode = document.post.mode.value;
    
    if ($.sceditor) document.post.message.value = $(document.post.message).sceditor('instance').val();
    
    FA.Popup.open('', 'Preview', function(popup) {
      popup.innerHTML = '<div class="fa_popup_loading">Loading preview...</div>';
      
      $.post(mode == 'post' ? '/privmsg' : '/post', $(document.post).serialize() + '&preview=1', function(data) {
        var preview = $(['.postbody', mode == 'post' ? '.post' : '#preview', '.main-content.topic', '#preview'][FA.Popup.forum.version], data)[0];
        popup.innerHTML = '';
        
        if (preview) {
          var content = document.createElement('DIV');
          content.className = 'fa_popup_preview';
          content.appendChild(preview);
          popup.appendChild(content);
        }
      });
    });
    
    e.preventDefault();
  }
});

Save the script and you should now be able to quickly view your message previews ! Mr. Green


This tutorial was written by Ange Tuteur.


Last edited by Ange Tuteur on September 23rd 2015, 8:24 pm; edited 1 time in total
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

tikky, Winging and Solhy like this post

Back to top Go down

Tutorial Re: A Popup module for your forum

Post by Ange Tuteur September 11th 2015, 10:56 am

Advanced : Technical Documentation


This section will explain all the technical details about the popup, so you can utilize the methods and create your own plugins. Note that this will require some prior knowledge in JavaScript.

Quick Navigation :

  1. Methods
  2. Additional Properties
  3. Final Example



A Popup module for your forum 09615110 Methods


FA Popup has three methods; open(), close(), and getPage(). The one you'll be using most is open.

Quick Navigation :

  1. open()
  2. close()
  3. getPage()



FA.Popup.open()


Syntax :

Code:
FA.Popup.open(href, title, callback);


Parameters :

ParameterDescription
hrefTakes a string value. The value should be the URL of the page you want to open in the popup. If you don't want to open another page leave the value as an empty string.
titleThis takes a string value which determines the title of the popup. optional
callbackA callback function that allows you to perform additional modifications to the popup. optional


Callback Parameters :

The callback takes 1 or 2 arguments depending on if you entered an URL or not. These are the parameters the callback takes :
ParameterDescription
dataReturns the data from the AJAX call, if you submitted an URL to the href parameter.
popupReturns the popup content container for you to manipulate.


Examples :

This is a simple example that only uses an URL to open the founder's profile.
Code:
FA.Popup.open('/u1');

This one opens the founder profile again, but with a title for the popup.
Code:
FA.Popup.open('/u1', 'Founder Profile');

Example of using the callback function with an URL.
Code:
FA.Popup.open('/u1', 'Images on this page', function(data, popup) {
  var images = $('img', data); // get images from the data
  $(popup).append(images); // append images to the popup
});

Here's another example with using the callback function, but without an URL. Do this if you want to fill the popup with your own content, or content from another AJAX call.
Code:
FA.Popup.open('', 'Popup example', function(popup) {
  var error = document.createElement('DIV');
  error.className = 'fa_popup_error';
  error.innerHTML = '<b>Error :</b> A popup example has occurred.';
  popup.appendChild(error);
});


FA.Popup.close()


The close() method is used to close an active popup window. This method is bound to the close button and overlay, it's also automatically invoked if a popup is opened while another is still active.

Syntax :
Code:
FA.Popup.close();


FA.Popup.getPage()


This method is meant to be bound to pagination numbers, so when they're clicked the next page is automatically opened in the popup window. When you don't pass a function to the callback parameter this method is bound to any pagination in the popup by default.

If you're using a callback and the data returned has pagination you can bind this method like so :
Code:
FA.Popup.open('/search?search_id=unanswered', 'Search', function(data, popup) {
  var main = $(FA.Popup.forum.content, data)[0];
  if (main) popup.appendChild(main);
 
  var page = $(FA.Popup.forum.pages, popup); // get pages in the popup
  if (page[0]) $(page).click(FA.Popup.getPage); // bind the method to each page
});


A Popup module for your forum 09615110 Additional Properties


Aside from the usual methods, FA.Popup also contains some helpful data relating to the forum that you can use.

FA.Popup.forum.version : returns the version of the forum as a number.

0 = phpbb2
1 = phpbb3
2 = punbb
3 = invision

FA.Popup.forum.content : Returns a selector for the forum content container, the result is based on the value of FA.Popup.forum.version. It's useful for callbacks :
Code:
FA.Popup.open.('/u1', 'Founder', function(data, popup) {
  var main = $(FA.Popup.forum.content, d)[0]; // content container
  popup.appendChild(main); // add content to the popup
});

FA.Popup.forum.pages : Returns a selector for the pagination, the result is again based on the value of FA.Popup.forum.version. Again this is also useful for callbacks that contain pagination.


A Popup module for your forum 09615110 Final Example : Binding a popup to an element


Finally, to end this I'll provide an example of utilizing the popup. It can be used as a reference or applied to your forum if you want. This example binds a popup to the logout button in the navbar.
Code:
$(function() {
  var logout = document.getElementById('logout'); // get the logout button

  // make sure it exists
  if (logout) {
    // bind a function to the onclick handler
    logout.onclick = function(e) {
      e.preventDefault();
      FA.Popup.open('/login?logout=1', 'Logout'); // open the logout page in a popup
    };
  }
});

You can use native JS or jQuery; it doesn't matter. As long as you execute the popup inside the event, it'll show whatever you want. Good luck and be creative ! Mr. Green



This tutorial was written by Ange Tuteur.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

trajce, omarpop23, tikky and Solhy like this post

Back to top Go down

Tutorial Re: A Popup module for your forum

Post by Ape September 1st 2021, 3:16 pm

Updated : 09.01.2021

Thank you @Occultist Wink


A Popup module for your forum Left1212A Popup module for your forum Center11A Popup module for your forum Right112
A Popup module for your forum Ape_b110
A Popup module for your forum Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 18827
Reputation : 1968
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

sivastar, SarkZKalie and TonnyKamper like this post

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

 
Permissions in this forum:
You cannot reply to topics in this forum