How can I implement Iframe + content as Button Action?

Helli

Please give me instructions (maybe Java Function Code) for adding the following as a Button action:
<div class="iframe-overlay" style="display: block;"></div><div class="iframe-container"><span class="close-iframe" onclick="closeIframe()"></span><iframe id="xx" src="https://booking.sihot.com/SIHOTWebFernsteinsee/pages/template_3/index.html?HN=276&ARR=2021-05-12" name="web" style="background-color: #ffffff;"></iframe></div>';**

James

Hi Helli ,

You could place your iframe in a popup using either Popup Maker or Elementor Popups.

Then use Buttonizer to open this popup containing the iframe. 😁

Helli

James Hi James, thank you, maybe I could do that, but the Popop Maker is not working on my side (just tried it) and the Elementor will not either. Is it not possible just to use the Buttonizer Java Function, and if, how would above be the code for this? Tried it, but it happens just nothing ...

Castor

Hi @Helli ,

Perhaps you could try the following in your javascript action:

// define HTML to append
const myIframe = `
    <div class="iframe-overlay" style="display: block;"></div>
    <div class="iframe-container">
        <span class="close-iframe" onclick="closeIframe()"></span>
        <iframe id="xx" src="https://booking.sihot.com/SIHOTWebFernsteinsee/pages/template_3/index.html?HN=276&ARR=2021-05-12" name="web" style="background-color: #ffffff;"></iframe>
    </div>
    `;

// Check if already appended
if(window.appendedMyFrame == null) {
    // Append html
    document.body.innerHTML += myIframe;
    // Make sure it won't append again
    window.appendedMyFrame = true;
}

Let me know if this works!

Helli

Castor
Hm, sorry Castor, there is only one problem left, the iframe now appears (turns up) not on top of all but is covered by the header and also the buttonizer menu which obscures the content and makes it impossible to close the iframe again. I did now some time consuming investigations by means of Google (which I as a relatively from deeper knowledge unimpaired person quite often do) and found some hints for a solution. But unfortunately that did not help me. So please help me in case you do not have more important tasks on your to do list ...
regards Helli

Helli

Hi Castor,
you are a genius!!! This works perfectly. Thank you so much! I wish you just a perfect day.

regards
Helli

Castor

Hi @Helli ,

Sorry, I will not be able to give you a ready-to-go solution for you as this extends the functionalities of Buttonizer. But I can give you a direction of what I think you will have to do:

You will have to style the iframe and the other elements using css to get it on top (give it an higher z-index). So perhaps you could add some of the following custom css (go to the buttonizer custom styling editor!):

.iframe-overlay, .iframe-container {
    z-index: 9999999 !important;
}

If this doesn't work you could perhaps look to the place or person where you got the HTML from and ask for support there.