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.
Adding modal windows to the page
The modal windows can be added to the page either as content elements or frontend modules:
|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.
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.
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.
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:
Then, you can refer to this modal in any link using the URL hash you specified:
Trigger a lightbox
Similar to models, you can also trigger a lightbox using the
#lightbox URL hash inside the link: