Documentation Tutorials & Examples

We have created this tutorial to give you the steps neccessary to open the module in a modal (popup window)
The process we are demonstrating requires RokBox from RocketTheme.com

This tutorial assumes that you already have both the 'Constant Contact Sign-Up Majix Pro' module and the RokBox Plugin installed.

(This tutorial was created using Joomla! 3.3.6 and our Constant Contact Sign-Up Majix Pro Module v2.1.6)

Brief Summary:

Create an article that will contain a placeholder to display the module.

Create an article

create_an_article_1.png

Create an article that contains the "loadposition" tag. In this case we entered the position of 'embed-newsletter-modal'. This position can of course be named anything you like, just remember it for the step to add it to the module position. The article can be named anything you like.

Create a menu item

create_a_menu_item.png

The simplest method that we use for accessing a single article (one that does not have a link from any other menu on our site) is to create a menu item that can be used as an SEF link.
You can choose to skip this step if you prefer to access the article directly using 'index.php?option=com_content&view=article&id=## (all you need is to replace ## with the article number) Or you can use any other SEF component.

media_1410982665546.png

We created a new menu called 'SEF' so that any menu items added here can be accessed directly using the 'alias' that is created.
Once you have named the menu, Save & Close.

Create the Menu Item

create_the_menu_item.png

Then we created a 'Single Article' menu item and linked it to the article that was previously created.

Create a 'Custom HTML' Module

create_a__custom_html__module.png

Either using the RokBox editor button (found just under the textarea), or by copying the following html to create the link that will be used to open the modal.

<p style="text-align: center;"><a class="button" href="/[PATH_TO_FILE]?tmpl=component" data-rokbox-size="220 340" data-rokbox>Sign-Up Now!</a></p>

Please note: The class applied to the <a> may change based on your theme and css usage. In our case, we used a 'button' class that was already defined for our Joomla! Template. But this can be any class you desire to get the correct look for your site.

media_1415127022554.png

Additionally, if your Global Configuration does NOT have 'Use URL rewriting' enabled, then you would use a URL like:

index.php/newsletter-modal?tmpl=component

media_1415127170770.png

If your Global Configuration DOES have 'Use URL rewriting' enabled, then you would use a URL like:

newsletter-modal?tmpl=component or newsletter-modal.html?tmpl=component

The method you use again depends on a setting in your Global Configuration. (If you enabled 'Adds Suffix to URL' then add '.html', otherwise leave it off)
Lastly, these URL are examples only, your usage may vary depending on actual Menu Item names and if your Joomla! site is installed at the root location of your server.

Update the Position for the Sign-Up Majix Pro module

update_the_position_to_our_module.png

Enter the position just as you named it in the article for "loadposition". In our case it is 'embed-newsletter-modal'.

Check out your new link

check_out_your_new_link.png

Our example Link. This can be a button styled by your site theme, or simply a text link.

View the modal

open_the_modal.png

How our example looks in the new modal window.

View a Live Example

This link will open an example modal that we created on our site using these instructions.

 Click to view a Live Example!

OPTIONAL - Add a redirect for the landing page

An additional Optional step can be added if you would like to redirect the user to a new page once the form is submitted.
To set up a custom landing page, take a look at this documentation.

This tutorial was created using ScreenStepsfrom BlueMango Learning Systems.