How to show page content in Lightbox or iFrame with X-Pro Button

[muse_83]

Dear Themeco-Team,

currently I’m a kind of stuck with my plan to open a link like an overlay with the button element of the pro-theme.

My latest attempt:
I added [lightbox selector=".btn-lightbox"] to the side and I added the class “btn-lightbox” to the button

now I’m able to open the link in a lightbox but now I have the problem that I could not really stylize it.

What I want:
I want to show the page-content of the button link like an overlay over the current side. It should be responsive, should have a close-button, a scroll functionality and I need to stylize it.

[friech]

Hi Sebastian,

Thank you for writing in, instead of using the lightbox shortcode, you can utilize the Content Area Modal element, with this element, you can configure the button and the modal/lightbox as you see fit.

Hope it helps,
Cheers!

[muse_83]

Hi,

Thx for your help. I think it will work with it, but how do I write the html function to open any link automatically when someone is opening the content area?

I also run into another issue. I implement a from the same way but maybe the Content Area doesn’t support jQuery, because the date-picker is not working.

Looking forward to hear from you.
Sebastian

[nabeel]

Hey Sebastian,

You can add any HTML or custom content in Content Area Modal element. You can write your JS functions in the content JS section in Cornerstone (see screenshot)

There could be a JS conflict which prevented the date-picker to work in the Content Area Modal element, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Alternatively if you’d like to use the Lightbox feature you can follow Lightbox + Image Element but instead of Image element, you can add the Button element and instructions are the same.

If the issue persists you can share the page URL where you’ve added the Content Area Modal element so we can take a look at your setup.

Let us know how it goes!

[muse_83]

Hi,

I managed to get over my first problem. But the problem with the date-picker still exists – I’ve also tested if I could get it working with contact-form-7 instead of caldera-forms but there is the same issue with the date picker.

The side is: test.sport-mueller.at/all-about-bike/

…the Content Area Modal I’m talking about is “RESERVIEREN”.

Looking forward to hear you!

Best regards,

[ruenel]

Hello Sebastian,

The date picker does not load maybe because the Caldera Form script is not loaded in the script. There might be a setting that you can turn ON the script to be loaded globally. Please check out the documentation here:

• https://calderaforms.com/doc/global-email-general-settings/

If nothing is helping, provide us access to your site so that we can check your plugin settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

[muse_83]

Dear Support Team,

I think it’s not a problem of the caldera plugin, because the same but exists with CF7 too, which is recommended in your plugin sections.

I provided you the regarding informations and looking forward to a fix of that :-).

Best regards,
Sebastian

[nabeel]

Hey Sebastian,

Thank you for providing the credentials. I looked into the issue, the date-picker popup is rendering below the popup that’s why it is not visible on click. I went ahead and set the z-index of that .cfdatepicker-dropdown to much higher 2000000000009 or so should work to put it on top of the popup.

I added the following code in the Theme Options > CSS:

.cfdatepicker, .cfdatepicker-dropdown {
    z-index: 2000000000009 !important;
}

This has fixed the issue, please clear your browser’s cache and check the date-picker now. Cheers!

[muse_83]

Hi,

thx for the quick help, it works!

Have a nice weekend!

[rad]

You’'re most welcome! Cheers!