Open modaal from element inside iframe

[hirschferkel]

Hi there,

thanxs for the great library.
Is there a way to open modaal from an element e.g. a button inside an element?
I load an svg inside an object and this svg should be opened by modaal but the triggering button should be within the svg?

Haven't found a way to solve this...

Thanks for your help.

Best, hirschferkel

[Dan Moore]

hi @hirschferkel, there is nothing built into Modaal to handle this, you will need to write your own JS to handle that kind of action.

I don't see this being a feature we'll build into the plugin either as it's so unique, so i'm going to close this ticket. Thanks

[hirschferkel]

hi @danhumaan,

thanks for your answer. I did not expect to implement this kind of action to your code.
I tried to test your suggestion with an iframe and an Html document inside, now. This is how far I got, but there is a wired problem:

It does not work with
$( "#iframeID" ).contents().find( "#elementId" ).modaal({...})

And Modaal only works on every second click when I add a JS function. Do you have any idea, why?

<iframe src="External.html" id="mainContent" onload="access()"></iframe>

which calls this function:

function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}

[hirschferkel]

The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with

#$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});

Unfortunately after the modaal overlay gets closed, the functionallity vasnishes. Trying to find a way, now, to keep it on the element...

[hirschferkel]

The problem is that modaal injects the code which was wrapped and as it is an iframe-html it takes time to get loaded again. So modaal fires the after-close function bt the iframe is not ready.
The callback delay doesn't handle this problem as the iframe-content will load after it was inserted back from modaal...
Any idea, how I can re-attach the click-event to the iframe-element?

[hirschferkel]

Tried this.

 $(window).on("load", function() {
     reload();
    });

function reload() {
    var length = $("#iframeID").contents().find("#IDofDIVelement").length;
    // The following check will return 1, as the iframe exists.
    if (length == 0) {
        setTimeout(function() { reload() }, 500);
    } else {
        $("#iframeID").contents().find("#IDofDIVelement").modaal({
            content_source: '#modalwrapper',
            overlay_close: true,
            after_close: function reattach() {
                reload();
            }
        });
    }
}

[hirschferkel]

O.k. it does not work as soon as someone changes something dynamically within the content_source e.g. visibility of the trigger button.
Even the binding of the click function gets lost this way... and if there are more than one iframes available it's not possible to work on... Somehow Modaal updates and reloads after closing the overlay and does not reload in the right way while insterting the content_source into the website again