A modal window is a dialog box window that disables the main window but keeps it visible, It is useful to show important information that users must dismiss or close in order to reveal the main window.
This is a step-by-step guide on how to make a custom component that displays a modal window when the page is loaded using the Custom Pages Component.
Basic HTML skills required as you will be asked to edit HTML file
Creating Custom Component
Step 1 Download this custom component
We have prepared this component in advanced which you can download and edit later.
Step 2: Import Component
Admin / Pages / Component
Here you can see a list of the custom component which may have been installed on your system, click "Import Component" to install a new component from a zip file.
Step 3 Edit Component
Once the component is imported, click on Edit to make some changes to the component
Step 4 Customise this component
Within the HTML section, you can now customize the content of the modal window.
How it will be displayed.
Save once you have finished editing the component, and this component will be able to be selected when the user is editing a page.
Adding Component on Pages
Step 5 Adding the component
Edit any page you wish to add this component by clicking edit page button on the left corner of the page.
Click on empty space to add a component and search for "Modal"
Specify the title of the component if you need to, if Title is empty the component won't have a title.
Step 6 Publish the page
Don't forget to publish the page and check that the modal window is executed on page load.
Remove content of JS section in Edit Custom Component, if you wish to have Modal window to be executed on the click of a button (not on page load)