Content Modals Not OPening

[KMCHTX]

I have 3 content modals on my draft homepage

They are found in Registering For Classes and How to Watch Classes and the FAQ Live Stream which appears on the scroll down.

The two buttons are built in to the page. The FAQ is built into the header. They all worked last week. Now, only Registering for classes works. Even if I duplicate it, only one modal displays to the users on the page. Inspect element will show all the code and content of the modal.

I did a plugin conflict test. The issue is there. Only other thought is upgrade to WP 5.51
Can you take a peak? Lots of weird issues lately. I appreciate your help as we get this homepage done.

Cheers

[ruenel]

Hello @KMCHTX,

Thanks for writing in! Please update your shortcode content and find this:
shape=“rounded” size=“mini”

You must replace it with:
shape="rounded" size="mini"

What is the difference between the two? The quotes.

Kindly let us know how it goes.

[KMCHTX]

Thanks @ruenel

I fixed the syntax. Appreciate that. It was only in the button, not the FAQ. And, nothing improved.

[tristup]

Hi @KMCHTX,

As you have already gone through the Plugin Conflict test, can you please named the conflicted plugins or the issues you found. Also, I would recommend you troubleshoot other common issues :

1. CSS/JS Customization
2. Child Theme

If you find any issues that are related to any 3rd Party plugin(s), I would suggest you contact the author in that case.
If that does not help you, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Admin URL
– WordPress Admin username / password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[KMCHTX]

Thanks @tristup

I didn’t identify any issues. Here is the login.

[tristup]

Hi @KMCHTX,

It seems the **Registration Button" the Content Area Modal element’s custom content is blocking the modal, as it has an unwanted closing tag.

I tested it by formatting the HTML structure and it works fine, please find the test page URL here: https://meditationinhouston.org/test-content-by-x/

Thanks

[KMCHTX]

Thanks. I removed it from the watching video. Although the Registration button had the same tags with no problem. And there are no div issues int he FAQ as far as I see.

[KMCHTX]

Just as an aside, the FAQ is on another page where it does display. It is just the homepage, which has 2 modals on it (FAQ would be the third). Only the first modal opens.

Is there a reason that only one modal opens? All 3 did previously work.

But on a simpler page, all modals work.

Could this be related to the issue I am having on this thread? Is there something on this page that would gum up the works? Perhaps a javascript bug?

[ruenel]

Hello @KMCHTX,

I have investigated the page thoroughly and the reason why the content area modal element is not loading the modal popup is because of the extra <div> tags you have added in the contents. To save us time, I went ahead and edited your modal contents into these:

<div style="padding: 25px; line-height: 1.4; text-align: left;">

<p>You can register for a class using the links below or by finding the class you want to register for on the 
<a href="https://meditationinhouston.org/calendar">calendar</a>. You will be able to view the class on the same page. <br/><br/>
</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/prayers-for-world-peace/" title="Click here to register for Sunday Prayers for World Peace"]Sunday Prayers<br />
for World Peace[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/monday-modern-buddhism-class/" title="Click here to register for the Monday night Modern Buddhism class"]Monday<br />
Modern Buddhism[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/thursday-meditation-class/" title="Click here to register for the Thursday night meditation class"]Thursday<br />
Meditation Practice[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/monday-lunchtime-meditation/" title="tune in"]Monday <br/>Lunchtime 
Meditation[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/tuesday-lunchtime-meditation/" title="tune in"]Tuesday <br/>Lunchtime
Meditation[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/wednesday-lunchtime-meditation/" title="tune in"] Wednesday <br/>Lunchtime 
Meditation[/button]</p>

<p style="text-align: center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/friday-night-lecture/" title=" Click here to register for our next Friday night lecture"][events_list #_CATEGORYNEXTEVENT category="313" limit="1" class="mbl"]Friday Night Lectures: #_EVENTNAME[/events_list][/button]</p>

<p style="text-align: center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/day-course-live-stream/" title=" Click here to register for our next day course"][events_list #_CATEGORYNEXTEVENT category="314" limit="1" class="mbl"]Day Course: <br />
#_EVENTNAME[/events_list][/button]</p>

</div>

<div style="padding: 25px; line-height: 1.4; text-align: left;">

<p>You can watch the classes using the links below or by finding the class you want to watch on the <a href="https://meditationinhouston.org/calendar">calendar</a> or the class pages:</p>


<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/prayers-for-world-peace/" title="Click here to watch Prayers for World Peace from Sunday morning"]Sunday Prayers<br />
for World Peace[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/monday-modern-buddhism-class/" title="Click here to watch the meditation class from Monday night"]Monday<br />
Modern Buddhism[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/thursday-meditation-class/" title="Click here to watch the meditation class from Thursday night"]Thursday<br />
Meditation Practice[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/monday-lunchtime-meditation/" title="tune in"]Monday <br/>Lunchtime 
Meditation[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/tuesday-lunchtime-meditation/" title="tune in"]Tuesday <br/>Lunchtime
Meditation[/button]</p>

<p style="text-align:center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/wednesday-lunchtime-meditation/" title="tune in"] Wednesday <br/>Lunchtime 
Meditation[/button]</p>

<p style="text-align: center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/friday-night-lecture/" title=" Click here to watch our Friday night lecture"][events_list #_CATEGORYNEXTEVENT category="313" limit="1" class="mbl"]Friday Night Lectures: #_EVENTNAME[/events_list][/button]</p>

<p style="text-align: center;">[button class="mas" shape="rounded" size="mini" href="https://meditationinhouston.org/day-course-live-stream/" title=" Click here to watch today's day course"][events_list #_CATEGORYNEXTEVENT category="314" limit="1" class="mbl"]Day Course: <br />#_EVENTNAME[/events_list][/button]</p>

</div>

Kindly check out the page now.

[KMCHTX]

Thank. I see. The whole modal needed one single <div> tag.

Thank you for your help. This is a relief.

[ruenel]

You are most welcome!