We are moving our extensions to Joomlashack.com. If you have questions about your membership or need support, please send us a message by clicking this link.
WordPress plugin
Perfect Popup Box is no longer available, because we have prepared new Perfect Everything in Everyway Solution which is more easy to set up, provides you with 15 integration plugins, 20+ attractive themes and layouts and many animations.
If you already have bought Perfect Popup Box just log in to your account. You will find there free upgrade to Perfect Everything in Everyway and still have the same functionalities and new features such as animations and cool themes for free. Just log in and download the upgrade.

Check out new Perfect Everything in Everyway

  1. Installation, configuration and update

    If installation file contains word UNZIP then you have to first unpack archive.

    If installation file ends with _j1.5 or _j2.5 then this file is for specific Joomla! version or newer.

    If you can not see module configuration after installation then you have installed module for older Joomla!.

    This extension is a standard Joomla! module. After installation you will find it in Extensions > Module Manager. It is not a component so you can not create for it menu item like for Joomla! Article.

    Each configuration field of module has tooltip, shown while hovering mouse over field label. Read those tips to get more information.

    Tooltip of module ajax Popup Box

  2. Module position

    Module should be published at position before </body> closing tag. Usually it is named debug. If you do not have such position then add following code to your template in index.php file

    <jdoc:include type="modules" name="debug" />

    and in file: templateDetails.xml


    If you published module in any other position it should still work.
    You should hide module title if you publish it in other position.

  3. How to check module ID

    When you are editing module configuration you can find ID in URL, e.g.

    You can find module ID also in Module Manager list in last column - preview.

  4. Title of module still shows up

    Popup Box is working fine, but title of module still shows up, e.g. in left column with other modules.

    Then go to module configuration and on the left in Details section set Show title: Hide. On some templates it would not help, because there will be still displayed empty box without title and any content. Then you have to published module in other position or the best way will be to publish module in debug position.

  5. Place static toggler tab of Lightbox layout in article content

    Enable Joomla! plugin content - Load Modules and move it to the last position of all content plugins. Insert in your Article following syntax
    (Do not copy this code! Write it yourself to avoid copying unnecessary invisible HTML code):

    {loadposition popupbox}

    Remember to change formatting of this line from Paragraph to DIV. Otherwise it would not validate and would not work in Internet Explorer.

    Go to module configuration and publish it in position popupbox and assign to all menu items.

    Since Joomla! 1.7 you can also insert in your Article following syntax in which you have to specify exact module title which you have set in module configuration. Module has to be published, position has to be empty and assign to all menu items
    (Do not copy this code! Write it yourself to avoid copying unnecessary invisible HTML code):

    {loadmodule mod_pwebbox,Module title}

  6. Lightbox window (Modal)

    Publish module in standard position or better in debug position and select Layout: Lightbox to display Popup Box in Lightbox window.

    If you want to close Lightbox window with own link then use following JavaScript code:

    If you are using Joomla 1.5 then you can edit file: /media/system/js/modal.js and around line 259 comment one line as in following part of code. It would prevent from closing Ligtbox window when pressing X key.
    onkeypress: function(e) { 
    	switch (e.key) { 
    		case 'esc': 
    		//case 'x': //comment or remove this line 
  7. Theme - CSS files structure

    All layouts of module has at least two CSS files - styles with colors and general file with layout and structure. There are also special general files for Internet Explorer.

    In Joomla! 2.5 and newer CSS files are located in:
    In Joomla! 1.5 files are located in:

    File Meaning
    style/*.css styles with colors
    pwebbox.css layout structure and positions, does not have colors
    ie*.css styles for Internet Explorer

    If you want to change background color, font size or other styles of Popup Box and you do not want to edit CSS files, then you can specify some parameters in configuration fields in Theme tab.

    Remember that not all custom styles parameters are working for all layouts!

  8. Create own CSS styles

    To create new CSS styles you have to copy and rename existing file with styles and replace all CSS classes in this file which the name of original file.

    For example to create new style copy file: media/mod_pwebbox/css/style/dark.css and rename to: media/mod_pwebbox/css/style/example.css (location depends on Joomla! version). Then edit this file and replace all CSS classes ".dark" to ".example". Now when you will reload module configuration you will see new style in Styles list.

  9. Rounded corners in Internet Explorer

    In module CSS3 PIE was implemented to support rounded corners in Internet Explorer 7 and 8. There are no guarantee that it will work. It depends on you Joomla! template and other extensions. CSS3 PIE would work by default only if you have installed Joomla! in root directory of your domain.

    If you have site in sub-directory then you have two edit CSS files for IE located in: media/mod_pwebbox/css/ie*.css (location depends on Joomla! version) and correct absolute path to file PIE.htc.

    If you have installed Admin Tools Professional then you have to set in .htaccess Maker to Allow direct access to these files: media/mod_pwebbox/css/PIE.htc (location depends on module and Joomla! version).

  10. Vertical toggle button

    Vertical toggler tab can be enabled only for left and right position.

    • In Theme tab set Vertical toggler tab: Yes.
    • Set font color (e.g. #fff).
    • Set toggler button width = 0 or leave blank and height (e.g. 120).
    • Select rotation of tab text.
    • To change text go to basic tab and set Toggler tab name.
    • After saving configuration go to front-end site with Popup Box and refresh it.
    • If text of toggler tab is cropped then enlarge height of toggler tab.
    • To create new image with text set Vertical toggler tab: Recreate image.
    • If you have changed configuration of toggler tab and image with text did not change then refresh page one more time or clear browser cache.
    • When you have finished creating image with text then set Vertical toggler tab: Yes.
    • To change font you have to replace file: media/mod_pwebbox/images/font.ttf with own TTF font.

    If you get following error then you need to enable this function in PHP
    Fatal error: Call to undefined function imagettftext()

  11. IcoMoon

    IcoMoon is available since Joomla! 3.0. If you have older version of Joomla! you can still use this option. You have to download Joomla! 3.0, unpack it and upload directory: /media/jui into: /media directory of your Joomla!.

  12. Box appears under flash animation

    Add following HTML code to OBJECT tag displaying your flash animation:

    <param name="wmode" value="transparent">

    and following one to EMBED tag

  13. Box appears under other layers

    Edit module CSS file with layout located in: media/mod_pwebbox/css/pwebbox.css (location depends on Joomla! version) and change in first declaration z-index property. You have to test how big it should be in your case.

    .pwebbox-left, .pwebbox-right, .pwebbox-top, .pwebbox-bottom {
        position: fixed;
        z-index: 9999;

    You have to do also next tip if you want to use calendar field.

  14. Calendar date picker displays under Popup Box

    By default calendar date picker has set z-index style property to 100. If you have moved Popup Box on higher level, e.g.: 10000, then you have to move also date picker one level higher: 10001. Paste following code at the end of module CSS file with layout located in: media/mod_pwebbox/css/pwebbox.css (location depends on Joomla! version):

    body div.calendar { z-index: 10001; }
  15. Open Box with own link or image

    The most important thing is to assign module to all menu items and publish it in position which your template has. View page source in your browser and try to find string: mod_pwebbox. If there will be no such string then you did not publish module correct. Module has to be loaded on page where you want to open it - otherwise it will be impossible to open it.

    Popup Box can be opened with own link, image or other HTML element by applying to it class or using JavaScript. See examples in Advanced Tab of module configuration or use following code, where ID has to be replaced with an ID of module (how to find ID). You should not use example with JavaScript code if you want to place it in editor because it will be removed after saving.

    <a href="#" class="pwebboxID_toggler">Show popup</a>
    <a href="javascript:pwebBoxID.toggleBox()">Show popup</a>
    <img src="path/image.png" class="pwebboxID_toggler" alt="" />
  16. Open Box with menu item

    The most important thing is to assign module to all menu items and publish it in position which your template has. In module configuration select layout: Slide in box or Lighbox window.

    View page source in your browser and try to find string: mod_pwebbox. If there will be no such string then you did not publish module correct. Module has to be loaded on page where you want to open it - otherwise it will be impossible to open it.

    Create menu item type of: External URL and as link use following code, where ID has to be replaced with an ID of module (how to find ID), configuration preview:

  17. Tracking

    If you want to track all clicks on Popup Box in your Google Analytics, just enable tracker and decide weather you are using traditional or asynchronous code in some other module or plugin or just pasted code in template.

    You have to also set Tracker page view (eg.: /tab-clicked) or Tracker event (eg.: 'Box', 'Opened').
    Configuration preview

    If you want to track your Google AdWords campaign, then paste image URL as you can find in following example code:

    <img height="1" width="1" alt="" src="https://www.googleadservices.com/pagead/conversion/123456789/?label=test&guid=ON&script=0"/>

    If you want to track Microsoft adCenter campaign, then paste URL of iframe.

    Remeber to replace in URL all encoded &amp; with &

    You can also add some extra code for tracking clicks on tab. It can be your own Google Analytics code or any other tracking script. Remember to add only JavaScript code. No HTML tags are allowed. If you want to load some other library to track, then it should be made by some other module.

  18. Enable RTL

    Popup Box support RTL languages. If your site is only available in RTL language then you should set in Basic tab of module configuration Enable RTL: Yes. If you have site in many languages then leave Enable RTL: Auto.

  19. Popup Box is broken in Internet Explorer

    If your site is not working even in Internet Explorer 9 then check if you are loading jQuery from remote location, e.g.: //ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js. Internet Explorer is blocking remote JavaScript files and you have to use local copy of jQuery stored on your server (read more on Microsoft site).

    Validate your site with: W3C Markup Validation for and correct all HTML errors. If you are using Joomla! content plugin Load Module Position to display Popup Box Tab in Article then check if syntax {loadposition ...} is not inserted in Paragraph and change formatting to DIV. Popup Box use CSS 3.

  20. Popup Box is not showing

    Check if you have published module in position which your template has.

    Check if you have assign module to all menu items. If not then do this at least for test.
    View page source in your browser and try to find string: mod_pwebbox. If there will be no such string then one of previous tip is still not done.

    If you have Joomla! 1.5 then check if you have loaded MooTools 1.12 (since Joomla 1.5.15) or MooTools 1.2.5 (since Joomla 1.5.23 with enabled System Plugin - Mootools Upgrade). With other versions of MooTools Popup Box might not work.

    Try to unpublished other modules using JavaScript to find which one is breaking Joomla MooTools Framework. Usually it appears when you have published module which use one of frameworks listed below.

    To check if there is any script running jQuery, view page source in your browser and try to find string: jquery. If there is such string then try to find jQuery.noConflict(). If there is not such string then you have to add this code (read more how to use no conflict mode of jQuery)

    Another reason can be plugin or template which compress and merge JavaScript files and puts them after JavaScript declaration hard coded in document header. Script from this module has to be before that declarations. Move all compressed files at the beginning or exclude this module from compression.

    Check also if your template removes Joomla! MooTools and puts own script at the end of document header. To do so, disable debug mode in Joomla! Global Configuration and view page source in your browser and try to find one of following strings:
        /media/system/js/mootools-core.js - Joomla! 1.6 and newer,
        /media/system/js/mootools.js - Joomla! 1.5,
        /plugins/system/mtupgrade/mootools.js - Joomla! 1.5 with enabled plugin System - Mootools Upgrade.
    If you would not find one of them, then look for:
    If you would find such string, then you have to contact with your template developer to disable this feature, because it is breaking Joomla! Validation script.

  21. Modules Anywhere

    If you have loaded Popup Box Tab into template with extension Modules Anywhere then it would not work, because JavaScript and CSS files are not being loaded into document header. You have to publish Popup Box in some template position. You can load Popup Box with Modules Anywhere but only into Articles or Custom HTML module (Joomla! 2.5+).

  22. JavaScript Frameworks which overrides and breaks Joomla! MooTools

    If your template or any other extension use on of following JavaScript library, then Joomla! MooTools might not work. Module Popup Box needs MooTools to work properly.

  23. I have installed Popup Box and it is nowhere to be seen

    From here on out Perfect Popup Box is Perfect Everything Everyway - we will soon introduce the biggest update for this module yet!