Need it to STOP loading header, menu and footer

I have the same issue. #modal-ready is in the pulled content, yet it is loading the entire page.

Thanks, kimberleym. It’s good to know I’m not the only one.

WP Post Popup — any suggestions?

I have found a solution, though may be particular to me. I’ll share in case it’s not.

I was using the method designed for “external url”s (see documentation) – it did seem to be working but perhaps there were changes in a recent upgrade that stopped it working. I have now changed to use the internal url parameter method which works no problem. That is:

>Use the “modal-link” URL parameter
>Example: https://wp-post-modal.allureprojects.com/?modal-link=https://wp-post-modal.allureprojects.com/modal-content

@dgtlrose It’s not quite clear what you mean. Do you have an example somewhere where I can see?

allure,
Glad I am not the only one. I was about to drop over. It worked before but is broken now. I know the docs say you can wrap in a div with id=modal ready but that doesnt work in Gutenberg.

Two examples:
Click on view recipe on this:
https://webintheworks.com/PhD3/maffe-recipes/

or any link on these overlay pages
https://webintheworks.com/Omni/

@richterworks It should be working with Gutenberg. I just tested and it does for me.

I see that on your site the content is not being wrapped properly by the modal-ready div. This may be caused by some incompatibility with another plugin. Could you try disabling all plugins and see if it starts working.

My site is not live yet, so it isn’t accessible to the public.

1. If I use this code, or any variation removing the outside div or other classes besides modal-link:

<div class="header_mid_button_wrap"><a href="/member-login/" class="modal-link cmsmasters_button header_mid_button">test 1</a></div>

Then the box takes a LONG time to even open, and when it does it includes the menu bar, the page content and the footer.

2. If I use this code:

<div class="header_mid_button_wrap"><a href="https://mydomain.com/?modal-link=https://mydomain.com/member-login/" class=" cmsmasters_button header_mid_button">test 2</a></div>

It dims and the top of the white bar appears, with the X in the top corner, but no content ever loads. But if I actually go to the url of https://mydomain.com/member-login/ it does load, so the url is not the issue.

3. If I use this code, then the modal loads (thin white bar with the X in the corner” loads over every page, every time a page loads.

<div class="modal-link header_mid_button_wrap"><a href="/member-login/" class=" cmsmasters_button header_mid_button">test 2</a></div>

What I want to do is to have it so when they click my button, the popup appears immediately and displays the content from a page on my own site. But I cannot figure out what “Add a modal-link class to your link” in the documentation means if it isn’t how I used it in #1 above, nor can I figure out what is meant by “Use the “modal-link” URL parameter Example: https://wp-post-modal.allureprojects.com/?modal-link=https://wp-post-modal.allureprojects.com/modal-content” if it isn’t how I used it in #2 above.

Any help would be appreciated.

Thank you.

• This reply was modified 5 years, 4 months ago by dgtlrose.

@dgtlrose Whatever method you use, the popup will not appear immediately. It is getting the content from another page which takes time. It should be faster than loading that page, but definitely not instantaneous.

You must check that the page you are trying to load into the popup (/member-login) has the modal-ready div wrapping the content that should be loading into the popup.

If it does have it, then there is something wrong with the URL in the href. If it doesn’t have it then you need to figure out why that is first.

The part that is supposed to load into the popup definitely doesn’t have a modal-ready div wrapping it. What is the wrap supposed to be/where do I find that in the documentation?

Ok so it worked fine without the id wrap before. I dont know why it stopped showing just the content and added the header footer and menu.

I tried adding the id to a group block and Gutenberg forced me to convert to HTML. So my code looks like this (below) but now works without adding header and footer.
<!– wp:html –>
<div class=”wp-block-group”><div class=”wp-block-group__inner-container” id=”modal-ready”>
This is a sample popup. Your content would go here.
</div></div>
<!– /wp:html –>

Would work better with Gutenbeug if JS call was to a class which we could add to a group block without having to convert to HTML (such as class=”modal-ready”).

@richterworks thank you. I read the documentation but after 20min of fumbling around it was still NOT CLEAR to me that the content you are pulling must have the “modal-ready” ID and now it’s working. Although my issue was not the same as the original poster’s, I want to thank you!

Oh, when will nerdy (but awesome) programmers finally hire ordinary people to proof read their documentation!?

@earth_human Haha, nerdy is pretty accurate. No hiring happening until someone pays me to support this plugin ??

However, it would be super helpful if you mention where exactly you were confused and I promise to update the documentation to make it easier for all future folks to implement!

I had this same issue, but solved this by making the modal-ready div a separate div from the content, as the content had some formatting that seemed to be causing the issue.

@allurewebsolutions I can’t remember exactly now, but it seemed like there was no mention on the “install” tab of your plugin page that the div id MUST be set to “modal-ready” and instead it was buried further in the documentation which very few people would ever delve into. If this divider ID is an absolute necessity then it should be mentioned front and center. (personally I do read the information on the install tab, and I do not consult the documentation, but I’m not sure about others)