Opening a modal window through an image

Modal windows are usually opened on page load, on page leave or by clicking a button or link on the page. I have made a demo page to create this tutorial which looks like this: 

The grey area is the overlay itself, it is displayed like this in the editor, you can read more about it here:

The Blue button is set to trigger the overlay on click:

What we want to achieve is to trigger the overlay on button click but when the image with the cake is clicked then the modal should be shown to. For this we will need to add a custom class to the image we have, this class will be called "image_class" in this example:

Now you will need to add a custom script to the page. The custom script is:

$( document ).ready(function() {
$( ".image_class img" ).click(function() {

.image_class img{
cursor: pointer !important;

You will need to replace the modal ID in the code above (in the longest line) with the one you have noted down, please make sure that you keep the code as it is, just replace the ID, including the "#". Ad the custom code to the "Code for Head Tag" field:

You can save your page and from now on the overlay window should be opened by clicking the image to. If you have any issues or questions with the tutorial above, then please let us know.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Create a support ticket Create a support ticket