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;
  • fixed popups;
  • modal 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

Updated for Sparkle 3.0

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 ©2020 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.