Open modal with click anywhere in column

[ingo]

Hi,

I want to add a function to a column.

The whole column has to work as a button to open a modal when clicked anywhere within the column.

I tried working it out with the custom attributes but without success.

Your help would be appreciated.

Thank you!

[tristup]

Hi @ingo,

Thanks for reaching out.
It seems that you want to open a Modal by clicking on a column. If that is the case, I would suggest you go through the following thread which may help you.

Make button trigger modal, but only upon click (not at pageload)

Hi @nblund, You can use the following code to trigger the modal on the button click. Here open-modal-button is the class assigned to the button and the assigned id of the modal my-content-area-1. Remember that, the anchor-toggle suffix will be added to the given id of Modal. [Screenshot-2021-12-17-183402] [Screenshot-2021-12-17-183420] jQuery ( document ).on ('click', '.open-modal-button', ( e ) => { e.preventDefault(); jQuery('#my-content-area-1-anchor-toggle')[0].click(); } )…

And assign the open-modal-button class to the Column > Customize > Class instead of the button and check if that works for you. I have tested the same in my local environment, it worked perfectly.

Thanks

[ingo]

Hi,

thanks a lot. It worked.

But it results in another problem:
The column that triggers the modal also contains a button that shall open the modal. The actual modal-button stops working when I use the column as “modal-button” if I give the class to the button as well as the column only the button triggers the modal.

How can I achieve to open the modal with either the column and the button.

Thanks in advance!

[ruenel]

Hello @ingo,

Can you please provide us the URL of the page where we can find the Modal element? We need to inspect it because I have a hunch that you have nested the <a> HTML inside the column which is not correct and will only give you issues. It would also helpful if we can log in to the site for easier inspection. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ingo]

Thank you.

Secure note follows.

[ruenel]

Hello @ingo,

I have seen your set up and my hunch is correct. Since you cannot use the <a> HTML tag for the Column element, you can simply insert a DIV element and then use <a> HTML tag in it and position it as “Absolute” as well.

The element structure:

DIV element settings:

Please check out the example in the secure note below.

Best Regards.

[ingo]

Thanks so much!

Could you please also help me with the other mentionend problem:

"Yesterday a second issue appeared:
Somehow the dropdown of menu items with ancestors does not show anymore.

It would be highly appreciated if you can also solve this problem."

[christian]

Hey @ingo,

If you have content overflow in the bar like dropdowns, you must not set the Bar Overflow to Hidden. Please set the Bar Overflow to Visible.

To avoid confusion and missing answer in the future, please post 1 topic per thread. Not only that it’s better for you as it’s possible that multiple staff would be attending to each of your threads, it would also be better of us because we’d be attending to 1 issue at a time. This helps increase our response time which is good for all customers.

Thanks.

[ingo]

Thanks a lot.

[tristup]

Hi @ingo,

Glad that we are able to help you.

Thanks