How to make a timed or instant popup using the popupmodule particle
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Several members have asked if it is possible to make a "timed" or "instant" popup on a page. Here is a tutorial on how to do it.
1. Make sure that your template includes the "popupmodule" particle - if it doesn't then copy it from another template first of all. If you want to know how to copy a Gantry 5 particle from one template to another please read my tutorial here in Gantry 5 Official Documentation here .
2. Create a "popupmodule" particle on the layout of the outline on which you want to use the popup. Make sure that you put the particle somewhere on your layout out of the way (say the "footer" or "copyright") and complete the particle settings by choosing the module that you wish to show and giving the particle a unique ID on the "block" tab (i've used "splashpop1" in this example). It's also worth using block variation "no margin" and "no padding" too so that it take up no space on the page.
3. On the "page settings" tab of the same outline add two head assets (one for the CSS required and one for the JS required). Look carefully at the screenshots to see how it's done exactly but the required CSS is:
note the ID used should be the same as used in step 2 above.#splashpop1 { display: none; }
... and the required jQuery is:
note the ID used should be the same as used in step 2 above. Note also the "5000" is the time before the popup should appear on the page in milliseconds.jQuery(function($) { $(document).ready(function(){ function show_popup(){ $("#splashpop1 .g-popupmodule-button .button").click(); }; window.setTimeout( show_popup, 5000 ); // 5 seconds }); });
That should be it. The basic principle is, add the popupmodule, hide the button on the page, click on the invisible button automatically after a time interval to show a module in a lightcase.
One final caveat... every time you visit the page you will get the popup, there no facility to only show once.
Enjoy!
Regards, Mark. -
The following users have thanked you: Henning
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
- x
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.048 seconds