How to pass options over to izimodal (JS) from HTML

Question

Want to get iziModal to work. As a beginner the documentation is a bit daunting.

It works fine, but I cannot pass the available options over to the script. The documentation for that is here under 'Data Attributes'.

This is my HTML code:

<div id="modal" data-iziModal-title="My Title">
    <button data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-izimodal-open="#modal-iframe">iFrame</button>
</div>

And here the JS:

$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});

$("#modal-iframe").iziModal({
    iframe: true,
    iframeURL: "http://izimodal.marcelodolza.com"
});

All I want is for the popup to display the title attribute and by extension all other attributes, of course. The documentation says that "all options can be set via data-attrs."

You might notice that the iframeurl is set twice (in HTML and again in JS). Take it out in JS and it will stop working... just as another example of that issue.

Does anyone know this script and what I might have missed?

score 2 · Accepted Answer · answered Sep 10 '19 at 07:57

Got it.

The documentation is somewhat unclear. So here is the solution for anyone trying to figure this out too. The id in the div has to match with data of the following elements. To explain:

<div id="modal-iframe" data-izimodal-iframeurl="http://izimodal.marcelodolza.com" data-iziModal-title="My Title"></div>
    <button data-izimodal-open="#modal-iframe">iFrame</button>

In the example the div id is set to "modal-iframe". To get the button to respond with all the options, the button references the ID with data-izimodal-open="#modal-iframe". If the names don't match, it won't work.

Important: all options must be set in the div. In the example you see *data-iziModal-title="My Title" set correctly. Thus if placed into the it will not work.

Hope this helps anyone having the same issue.

EDIT

To clarify further: the JS code is fine. No changes necessary for it to work. You may change it's options, of course. The options in the HTML will always have preference over the ones set in the JS.

How to pass options over to izimodal (JS) from HTML

1 Answers1