Need more guidance: Make button trigger modal, but only upon click (not at pageload)

[caldwell]

I’ve read that topic, but I’m still a bit confused. I have a page with a Component which I’ve called “Multi Column Button.”

I want each of the buttons to open a different modal based on click only.

I tried naming one of the buttons the “my-content-area-1.”

I’ve inserted the custom code into the page.

No luck.

I’ve tried putting the code in the Component. No change.

Is there any set of steps I can follow? I’m not sure if I’m missing adding additional content/text into button URL, modal settings, etc.

[marc_a]

Hey Lane,

Thanks for reaching out!

It is hard for us to determine your current issue without checking your actual structure. With that said, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[caldwell]

I’ve sent that note.

Also, I seem to be running into what I thought was a LEGACY issue: I input Javascript and then it disappears from the editor. It doesn’t disappear immediately but eventually.

That’s quite frustrating. I’ve added it back in (again) for the 4-5th time (?) but have no idea why it disappears. I thought that bug had been fixed.

[caldwell]

Any updates on this?

[caldwell]

Still looking to get someone to log in and check this. Haven’t heard anything in a couple of days. Thank you.

[ruenel]

Hello Lane,

You can make use of the modal ID my-content-area-1 and insert it in the Button element link option as #my-content-area-1-anchor-toggle.

Or use the Toggle Text option instead:

I just made an example in your first Column.

Check it out.

[caldwell]

I had that working.

But you haven’t answered the question of how do I uniquely identify each modal so that all of the buttons on that page open their own modals. I’m guessing that I have to use some type of different ID or expand the code? Not sure.

If I just copy the code I had working, it opens only the first modal when the second button is clicked.

Thank you.

[tristup]

Hi Lane,

It seems that you have added the content individually, so you need to add the different unique ID to the Modal as shown by my colleague. And add the same in the respective buttons.

Hope it helps.
Thanks

[caldwell]

And I do that…how? where?

I have tried changing my-content-area-1 to my-content-area-2, and that doesn’t work.

I’ve tried changing the name of it completely to something like “schedule” or “schedule-1”, and that doesn’t work.

Of course, I’m matching the Modal “ID” with whatever I have tried putting in the javascript.

But I don’t know if I need to make multiple copies of the javascript in the custom code box or not. Whenever I’ve tried to change the custom javascript to use anything besides my-content-area-1, it just doesn’t work. I don’t know why.

I’ve not been able to make it work beyond just a single button.

If you change/fix button #2, I can easily follow your example for the rest of the buttons.

Thank you.

[caldwell]

Also, on the Toggle option, that gives a list of “words” as an option for the modal, but it doesn’t inherently make the whole button itself clickable from what I can tell. I want the whole button to be clickable and open up the modal. People are easy to get confused, and if they can’t click on the whole button, chances are, they’ll complain to the client that “it’s too hard.” Yeah. That’s a real possibility.

[ruenel]

Hey Lane,

I have created a demo page for you.

• See the URL in the secure note below.

The first Section uses a Button that covers the whole column and it opens the Modal element using the Toggleable feature with the “Toggle hash”.

The second Section has only the Modal element with the Toggle set to 100% width and height to cover the whole column.

Hope this helps.