Other plugins create pop-up that cornerstone can't handle

Support
#1

Hello Apex,

I have several plugins on my website that has embedded pop-ups. Woocommerce is one of our plugins and I have used the my-account short code create from woocommerce and placed it in cornerstone using classic raw content element. The my-account shortcode has pop-ups which allows customers to edit their account however these pop-up open underneath the page created in cornerstone. Once the pop-up pops up, the entire page becomes grey, you can clearly see the pop-up underneath all the test from the page which the pop-up can’t be clicked. I pasted the shortcode using default wordpress without any page builder and the pop-up works fine where customers can click it. I’ve also had this issue with other plugins where embedded into cornerstone, the pop-up in underneath the page. How do I fix this issue?

Thanks in advance,

#2

Hi @ShkaiTmyueas,

Thanks for writing in!
We are not sure what exact plugin you are using for the popup.
As per your description look like you have the z-index issue. You can try increasing z-index of your popup container via custom CSS.

Please check this article for z-index help.


sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

If you can send us the page URL where you have the issue, we can suggest you better.
One thing, this is something related to a third party plugins we only can try our best to point you the right direction.

Thanks

#3

Hello and thank you for getting back. Providing a web link would help however all the pop-ups occur on the account page where you need to be logged into our website. I did provide images to the issue I have and including the source code for the pop-up which is below all of the cornerstone codes. Hopefully this will help and help me out too.

I’ve circled where the profile picture uploads which starts the pop-up

The second picture is after the pop-up occurs where it is under the cornerstone built page and I can’t click anything in the pop-up.

#4

#5

Hi There,

I’ve created a test account and could replicate this issue on my end.

This issue occurred because the z-index value of the modal popup didn’t set yet. To fix this issue, please add this custom CSS under Theme Options > CSS:

#yith-wcmap-avatar-form,
#yith-wcmap-avatar-form-overlay {
    z-index: 9999;
}

Hope it helps :slight_smile:

#7

Hello,
That worked for me, I’ve added it in and also check how you resorted to the css. I have another plugin causing the same thing and this time, I was looking to see if it was the same issue. Might be however I can’t find where the pop-up div using the source code. I gave you right to the page assigned to your test account for https://thebartholomewmethod.com/my-account/my-bookings/
By clicking anywhere on the calendar displayed on the page brings the pop-up to adjust the calendar.
Another pop-up occurs when you try exporting it to .csv down at the bottom left of the page.

Thanks in advance.

#8

Hello @ShkaiTmyueas,

We need to be logged in to be able to view the given url. Would you mind providing us your WP login details so that we can check it? You can create a secure note and add your credentials. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you in advance.

#9

Secure note attached on my post above

#10

Hi,

Try to increase the z-index of the section where you have added the code for your calendar pop up.

If that doesn’t work, please provide us your wordpress admin login in Secure Note

Thanks

#11

I did and didn’t work. I added the secure note above your post.

#12

Hello @ShkaiTmyueas,

I have checked the issue and it seems that this error is coming from your 3rd party plugin Bookly Responsive Appointment Booking Tool. You may need to contact the creators of this plugin so that they will be made aware of the issue.

Meanwhile, you can temporarily resolve your issue by adding this custom css:

.modal-backdrop.fade.in:empty {
    display: none;
}

Hope this helps. Please let us know how it goes.

#13

It didn’t work and will open a support topic for the Bookly plugin.

#14

Hi @ShkaiTmyueas,

Please contact the plugin author for proper fixes. They are more familiar with the functionality :slight_smile:

Thanks!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.