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.


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.

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:

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


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.

Allow to open a modal window with a URL hash.

Then, you can refer to this modal in any link using the URL hash you specified:

Enter the modal's URL hash as a part of the link target.

Trigger a lightbox

Similar to models, you can also trigger a lightbox using the #lightbox URL hash inside the link:

Use the #lightbox hash to trigger a lightbox.