Popups

Popups add depth and interactivity to your website. Sparkle popups are an open-ended, configurable building block. You can use them to build different kinds of interactive elements, including:

  • mega menus;
  • alerts;
  • interchanging panels;
  • offers;
  • tooltips;
  • help/faq.

You can add a popup to a page via the format bar icon or when setting an On Click action. Editing popup content is modal, in that it excludes editing of the base canvas elements. You can switch via the format bar popup control. When visible, a popup can be deleted via the “Delete Popup” option in the format bar popup button.

Sparkle has three types of popups:

  • normal popups;
  • modal popups;
  • fixed popups.

Normal popups open in their canvas position, other page elements remain clickable. This lets you build in-page panels, contextual help and tooltips messages.

Modal popups take over the browser window, preventing scroll and interaction with other elements on the page. This makes modal popups ideal for alerts, calls to action, offers, newsletter subscriptions. Features related to closing popups (mentioned below) make the modal popup ideal for mega menus.

Fixed popups open positioned relative to the browser window, regardless of the in-canvas position. Other elements on the page remain clickable. Content in fixed popups that doesn't fit can scroll, which is ideal for full screen mobile menus. Smartphones with different screen sizes will always be able to scroll to the menu option. With auto-scrolling fixed popups the usual stick to top groups can be used to lock scrolling for items at the top of the menu.

Like any other canvas element, you can set visibility of popups to all pages, and normal popups can be made full width.

Opening

Popup opening can be triggered in different ways:

  • On Click
    This is the typical case, and can be used for
    all link types. This is set on the source of the link (button, image, etc).
  • On Hover
    Buttons add the ability to open popups on mouse hover, useful for drop down menu behavior. This can only be set on buttons.
  • After a delay
    A timed popup automatically opens after a specified amount of seconds. This is configured within the settings of the popup itself.
  • When the mouse exits the page
    The popup is automatically opened when the mouse leaves the browser window.  This is configured within the settings of the popup itself.
  • On scroll
    The popup is opened automatically when the page is scrolled at a certain percentage (relative to the entire page height). This is configured within the settings of the popup itself.

Popups that open automatically can be configured to open the first time the event occurs, or each time.

Popups can’t be nested, so one popup can’t open a different one.

Closing

Popups are generally closed by the site visitor, via an explicit user action. The default popup includes a close button, but any link inside or outside the popup can have an On Click action of Close Popup.

Any action that’s set to Open Popup also has the option to “Close When Clicked Again”.

Modal popups also have the “Click Outside/ESC to Close” option, to close when clicking outside the popup’s boundaries or pressing ESC.

Setting a popup group ID (on "Normal" popups) causes the popup to be closed implicitly when a different popup in the same group ID is opened. This can be used to show only one of different mega menus, or only show one panel of several popups, like say a tabbed section.

Popups also integrate with countdown timers, to close when the timer expires.

The settings for popups
The button popup settings
The popup open settings
Close option for modal popups
Popup group settings

Popup Usage Guide

Popups are extremely configurable, so much so that some common uses can be hard to spot by just looking at the settings. Here’s a how-to for a few of those.

Full screen mobile menu

The standard Sparkle menu falls short of mobile and touch-interaction needs. What’s needed is a menu that takes over the screen, with mobile-sized targets and built-in scrolling support. This can be achieved by using popups, here’s how.

Let’s start by creating the popup on the mobile device, for example from the popup icon in the top-left of the Sparkle canvas. Next the settings need to be switched to a “Fixed In Window” menu style, with horizontal centering and adjusting the height to the browser window, with no padding. 

In this configuration the popup/menu content will scroll vertically, making it ideal for menus or devices of different heights. You can also use stick to top content inside the popup, to have a fixed header in case the content scrolls.

You can customize its name from the layer panel or from the arrange inspector, for example naming it “Full screen menu”. Also make the popup background full width to use all the device screen, so something like this:

It can now be completed by adding some content and making the background a translucent black for example.

Clicking the close button in the format bar (or selecting “No Popup” in the popup icon menu) you go back to canvas editing, where we need to add the trigger mechanism to open the popup, like a button, and set some hamburger-like icon to it.

I left the “menu” button label for accessibility purposes but made it transparent. The on click action opens the full screen menu. No mouse hover configured because this is for mobile, but you could also make it activate on hover if you used this on desktop.

The way to make this only work on mobile is to hide the hamburger button on the desktop devices (or where you don’t need it anyway).

With a little planning and measuring and trial and error you can get the popup close button to align over the hamburger, to make tap to open and tap to close more straightforward.

Mega menu

A menu used in a desktop application conveys a complex hierarchy by providing multiple drop-downs that require dexterity and can be complex to move through. In a web context this can be solved by flattening the hierarchy in a single large pane, generally referred to as “mega menu”, very common on large complex websites.  A mega menu contains more than just a single list of items, perhaps making use of the extra space by also adding graphics to illustrate or decorate the menu and other interactive elements.

Here’s how to set up a mega menu. The base for a mega menu is an item on the canvas that will trigger the popup, a button works best for this.

After adding the button, you configure the “On Click” and “Mouse Hover” actions to “Open Popup”, and create the popup by selecting the “New Popup” option, then set the newly created popup to be the popup for both click and hover, and set the “Close When Clicked Again” and “Close on Mouse Out” checkboxes to achieve the common behavior of drop down menus.

Note that by changing the “On Click” action you can achieve a split behavior between clicking and hovering, which is not available from the stock Sparkle menu.

The newly created popup is a default “Normal” mode popup, which you should move on the canvas next to the button. A quick test in preview will confirm the popup is shown when you hover or click the button.

The close button is useful in other contexts so it can safely be deleted for the mega menu setup, because we have configured the mega menu to auto-close when the mouse moves out of the popup.

You can now fill the popup with links and anything else you need there. You can add as many buttons and associated popup as needed for the navigation of the entire site.

Finally setting the button to be visible on all pages will automatically also show the popup on all pages. Here’s an example of a finished mega menu.

Tabbed view

A tabbed view is combination of multiple overlapping panes, where to save vertical space only one is shown at a time, and a “tab” can be clicked/tapped to switch pane. Here’s how to set this up using popups.

While popups, as their name suggests, generally pop up over existing canvas content, you can configure a popup to be visible as soon as the page loads by setting its “Open Automatically” to “After Delay”, with a 0 second delay. The Popup Group setting instructs Sparkle to auto-close this popup/pane when another one is shown.

Suppose you need 3 panes, you will create 3 popups with same Popup Group, and only the first one with the “Open Automatically” setting.

Create 3 buttons on the canvas to open the corresponding popup and position the popups so that they open directly under the buttons. The buttons will be set up to open the popups on click and/or on hover, but without the closing options, to always keep one pane visible on the canvas.

This is a sample of how that might look:

Modal banner

A classic use for popups is to take over the browser window and be hard to ignore. This helps implement annoying but sometimes effective calls to action.

Using the “Open Automatically” settings, you can make a popup appear based on how long the visitor has been on the page, on how far down the page has been scrolled, or if the mouse cursor exited the page.

By removing the popup close button that’s added by default, you can be more controlling on how and when the popup is closed. A countdown smart field can be added to a text field in a popup, or to a button in a popup, to delay closing the popup.

For example when added to a button, a countdown configured like this will enable the closing button after 15 seconds. This can be used creatively to “gently push” the site visitor towards performing a different action with less friction.


Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.