Modal Window

Overview

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.

Download Modal Window Component

Step 2: Import Component

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

 

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

 

Possible Customisation

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)

 

 

 

Created on 23 February 2019 by Michael Christian. Last modified on 26 July 2019

Was this helpful?  

1 Like
Share

[Discuss]

photo
{{ comment.user.is_me ? cc.translations.my_comment : comment.user.name }} {{ comment.user.is_me ? cc.translations.my_comment : comment.user.name }} {{comment.user.name}} [wrote]...
[Reply] [Like] [Unlike]  {{comment.like_count}} [person] [people] [liked this] [Edit] [Delete] {{ comment.timestamp.date_str }}

[Loading...]