Modal relative to where user clicks

[arquieta]

Hi, everyone. I don’t know how if this is possible so I’m asking.
Consider this case scenario: I have a page with a lot of columns that are the same, but are displayig different information. Column A is equal to column B but A talks about Gandhi and B talks about Buda.
The elements inside are placed the same but differ in the information.
Then, when a user clicks on column A a modal popup is displayed with more information about Gandhi.
But if they click on column B, the same modal should open but displaying the information of Buda.
Can I do this without having to create a modal for every column? Just one that gets the info inside de column and displays that?

Thanks for your time

[ruenel]

Hello There,

Thanks for writing in! With the latest version of the theme, you can make use of the modal content area for each column. It is not necessary that upon clicking on the column. The modal content area provides a toggle button which you can place at the end of each column which would serve as a “read more” kind of button. To get to know about this modal content area element, please check this out: https://theme.co/apex/forum/t/elements-content-area-modal/10224

Hope this helps.

[arquieta]

Thanks for your replying.
To be honest, I updated today the theme, so, I’m getting used to the new features like the content modal area.
But still I don’ t think it would help me. Let me explain a little bit better with a screenshot

I’m trying to make a page for animal adoptions. The green area is the area that I want to trigger the modal of the dog’s information. So every dog should trigger a modal with their respective information. At the end I have a button (well, a cta button) for a form to be displayed to continue with the process of adoption.
So, if I put another button at the end of the column would look bad with this design.

It is possible to do what I’m saying?

[ruenel]

Hello There,

Do you want to have click events in the image of the dog? That is still possible. Simply create the image of the dog as a link and then insert # as the href of the image. You will need to insert a custom my-image class of the image and also a custom my-modal class for the content area modal. The toggle button of the content area modal will have a 0 width and height so that it is not visible. And finally, with the help of this custom JS code to trigger the modal after any click events in the image of the dog. You can insert this in the custom js section of Cornerstone.

(function($){
  $('.my-image').on('click touchend', function(){
    $(this).parent('.x-column').find('.my-modal').trigger('click');
  });
})(jQuery);

I have tested this in my local install and I can vouch that this will work.

Screenshot

Please let us know how it goes.