Introduction
1. What is Advanced Popup?
Advanced Popup helps you to give your customers fast and attractive messages. With this component, your site will display popup with text/html content, images, forms, audio,....
Advanced Popup shows your products, news, notices, advertisement as well as event on any pages that you want and help you to increase the traffic of your site.
2. Features
- Advanced Popup is writen by javascript, it means all files will be loaded faster
- SEO Performance: The component is optimized superlatively for Search Engine due to Joomla full SEF/SEO compatibility and effective image performance.
- Joomla MVC standard: Advanced Popup’s code is written based on Joomla 3.x standard, making it work greatly on Joomla 3.x website and support custom layout from templates.
- Responsive design: Popup window is suitable for any mobile/ tablet devices.
- Support multi-language.
- Easy to customize.
- Allow to add unlimited image layers, text layers as well as spider layers on popup.
- Rich text editor.
3. System requirements
Your system needs to meet the following requirements before proceeding the extension’s installation.
- Joomla version:
- >>> Joomla 3.3+
- Software:
- >>> PHP: (Magic Quotes GPC off): 5.3.1+ (5.4+ recommended)
- >>> MySQL: (InnoDB support required): 5.1+
- >>> MSSQL: 10.50.1600.1+
- >>> PostgreSQL: 8.3.18+
- Web servers:
- >>> Apche: 2.x+
- >>> Microsolf IIS7
- >>> Nginx 1.0 (1.1 recommended)
Installation
1. Upload extension
If you are new to Joomla, kindly find detail guide of how to install Joomla extensions Here.
2, Enable ExtStore Advanced Popup
The component Advanced Popup includes component, module and spider plugin.
- Enable component to create and design a excellent popup.
- Enble module by setting Publishand position. Enabling module will help you show popup on frontend.
- Enable spider plugin by setting Published. Spider plugin generate some options which allow to add and config as many spider layers as you want to popup.
Usage
1.From backend, choose Component => ExtStore Advanced Popup, click New button to create a new popup. You can see there are 2 main parts: Popup Builder and Configuration
Click 
Title: the name of popup for a product, an event or an advertisement,... is required.
Popup Builder: This part allows to see the change of popup when you edit anything. You also can edit the position and size of layers by mouse here.
Configuration includes:
Popup Options: There are some options in this part, allow you to set images, colors as well as change the parameters of size and position of layers.
Layer Odering: like a dashboard to manage and edit layers by click on the layer. It also helps to change order of layers by dragging and dropping a layer to the position you want in Layer Ordering part
Popup layer area: This is the main part which includes the main content of popup.
Overlay layer area: This is background which sets off the popup layer
2. How to create a design.
2,1. Overlay layer
Click on Overlay to set Overlay layer
Overlay Option
Background: There are two ways to display background of popup by image or color. You can set image background display by selecting image from folders or uploading from your computer or add image’s link
Repeat:
Please note that this option is valid for small image only.
- Repeat: image will be repeated to cover overlay background.
- Repeat Horizontally: image will be repeated horizontally on overlay.
- Repeat Vertically: image will be repeated vertically on overlay.
Overlay image position: Set the position of overlay image.
Color:This option allow you to set color background instead of image background for overlay. Choose color you want as well as adjust the opacity of color (the same as Popup Layer part)
Opacity: Allow adjusting opacity of overlay background by slider
Please note that you are allowed to display image background and color background at the same time.
2.2. Popup Layer
Click Color option to set color for popup
You are able to adjust opacity of color by slider
You can set popup size: The parameters of Width and Height option will decide popup size as well as you can change image size directly in Popup Builder option.
Audio: Allow to add link audio (.mp3 and .mp4) into popup.
2.3. Create an image layer.
From Popup Builder option, click Add Image to create an Image layer. A popup window will appear to choose image from library or upload from your computer.
There are 2 main parts here:: Popup Builder option and Image option. These two parts are compatible with each other, it means any change in a part will effect directly to the another. Here are the detail configuration of image.
You are allowed to set funtions for image layers
- >>> Function: Allow to choose close popup (user can click to image to close popup), on/off music (users can click to turn on/turn off music). open URL (link to another page when users click on image).
Please note that each image layer allows you to choose a function.
- >>> Link URL: URL you want to add to popup (it is available when you choose Open URL for Function option)
- >>> Open link in: Same Tab (the link will be opened in the same tab), New Tab (the link will be opened in the other tab).
Popup Builder you can see:
- Set the position of image
- >>> Move the position of image to anywhere on Popup as you want by clicking and dragging the image.
- Set the image size and image slope:
- >>> The width and height of image can be adjusted by mouse
- >>> The slope of image also can be changed by clicking
button and then rotating the mouse .
You are allowed to add as many images as you want into popup and set their position.
2.4. Create a text layer.
From Popup Builder option, click Add Text to create Text Layer
There are 2 main parts here:: Popup Builderoption and Text option. These two parts are compatible with each other, it means any change in a part will effect directly to the another
Popup Builder option
- You can move the position of text layer to anywhere in Popup as you want by clicking and dragging the text.
- You also can change the slope of text layer by clicking button and then rotating the mouse
Doing such things will change the parameters of Left or Top or Angle option at Text Option at the same time.
2.5 Create Spider layer
This feature will help you add spiders as much as you want into popup.
Step1: To create Spider layer, you need to Enable Spider plugin first.
From backend, go to Extensions => Plugins, search for Advanced Popup Spider, and then click 
icon to enable this plugin.
After that Add Spider option will be appear on Popup Builder part.
Step 2: From Popup Builder option, click Add Spider to create Spider layer
Here are the detail configuration of Spider layer
You can change the position as well as the height of spider to anywhere you want into popup by mouse.
2.6. Layer ordeing
Layer ordering include two functions:
- It is like a dashboard to manage and edit layers by click on the layer.
- It helps to change order of layers by dragging and dropping a layer to the position you want in Layer Ordering part
A layer can overwritten the others depending on the order of them in this part.
2.7. Remove Layers
- Remove layer: Delete layer you want by clicking on it and then clicking on
button. - Remove All Layers: Click on
button you will delete all layers created before.
3. How to display your design in front - page.
To display Popup on the frontend, you need to enable ExtStore Advanced Popup first
From Administrator site. choose Extensions => Modules, search for ExtStore Advanced Popup.
Here are the detail configuration of Popup module.
Step1: Select Popup ID and enable module
Click on Select a popup to choose the popup you want to display
Step 2: Module Assignment
You can choose one of On all pages, No pages, Only on the pages selected, On all pages except those selected from the list. To assign to some but not all pages choose the third option and select the menu links that you want the module associated with.
Frontend Appearance
Finally, here we go
Still have questions.
If you have any specific request, or feedbacks as well as suggestions, feel free to contact us.