Modal windows

All modals on your website can be managed in the Modal windows backend module. It is a central place where you define modal configurations as well as their content. In Veello Theme all modals are powered by fancybox.

Every modal is built with a set of content elements that you can create and edit by clicking an edit button with a yellow pencil. This gives a lot of flexibility when it comes to defining a modal content.

Hint

For the best experience with modal forms we recommend installing terminal42/contao-ajaxform extension.

Basic modal configuration is simple and straightforward.

Adding modal windows to the page

The modal windows can be added to the page either as content elements or frontend modules:

Name	Type	Description
Modal	Content element / frontend module	Generates a selected modal window with a custom trigger.
Modal (auto)	Content element / frontend module	Generates a selected modal window with auto open.

Note

Automatic modals use localStorage instead of cookies to allow better caching of your website.

Manual open

The Modal content element and frontend module allow to open modal windows with a custom trigger. It can be one of the followings:

Button: Generates a link button with custom content as a modal window trigger.
Text / HTML: Generates a link with custom text or HTML code as a modal window trigger.
Image: Generates an image as a modal window trigger.

Set a custom trigger type in the modal frontend module.

Automatic open

An automatic option to open a modal window is provided by the Modal (auto) content element and frontend module. All you have to do is to select a desired modal window, set a delay in seconds after which the modal should appear and optionally the number of days before the modal is displayed again.

Hint

Once you have created an automatic modal frontend module, do not forget to include it in the page layout settings.

Settings for automatically opened modal allow you to define a delay and an interval.

Linking to a modal window

Modal windows can be also opened on initial page load by providing hash in the current URL. To make it actually work, you have to specify a special identifier that will open a select modal window. If you leave the configuration field empty, opening the modal this way won't be possible.

For example, if you set the URL hash to newsletter you will be able to open it by accessing the following URL: domain.tld/my-page.html#modal-newsletter.