Modal

A classic modal overlay, in which you can include any content you want

Features

  • Include any content
  • Default layout for quick stylish results
  • Advanced layout for maximum flexibility

  • Use any stack as open button
  • Custom colorise in advanced mode

Example

Default Mode

Even in default mode, you can use any stack for the open button, the body and the footer.
However, these will be fit into a given template, which cannot be changed.
If you plan to use the Button Stack to open the modal, be sure to check the "Omit Link" option of the Button, otherwise the background page will "jump" to the top when the modal is opened.

Call To Action

NEW 1.2.2
  • Call-To-Action - activates the Call-To-Action feature of the Modal stack
  • Delay - sets the delay in ms from page load until the modal is displayed
  • Scroll Position - sets the scroll position in px from the top where the modal is displayed

Advanced Mode

Advanced mode does not restrict you in any way. It only offers one single drop point for any other stacks.
It is your task to provide all the formatting and contents.
NEW 1.2.3
  • Content Width - individually set the width of the modal content
  • Units - select the unit type for the Content Width setting
  • Close Button - select where the Close Button should be placed

Colors

Furthermore, Advanced Mode gives you the option to customise the colors of the modal background as well as the close button.

Example

In the example below we used a Contact stack as the contents of the modal.

General

In Default Mode, you can set the Modal Title
NEW 1.0.1
  • Allow Background Scolling - this switch allows you to control whether the user can scroll the background while the Modal is active
  • Z-Index - gives you the option to control the Z position of the Modal. Only use this if there is a conflict with another stack
If you want to use Modal together Scroll-To-Top/Scroll-To, set the Z-Index of Modal higher than that of the Scroll stacks!

We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.