javascript - 如何将选项从 HTML 传递给 izimodal (JS)

Question

想要获取iziModal上类。作为初学者，该文档有点令人畏惧。

它工作正常，但我无法将可用选项传递给脚本。其文档是 here在“数据属性”下。

这是我的HTML代码:

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

这里是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"
});

我想要的只是让弹出窗口显示标题属性，当然还可以扩展所有其他属性。文档说“所有选项都可以通过数据属性设置”。

您可能会注意到 iframeurl 设置了两次(在 HTML 中，再在 JS 中)。在 JS 中取出它，它将停止工作......就像这个问题的另一个例子。

有人知道这个脚本以及我可能错过的内容吗？

Answer 1

明白了。

文档有些不清楚。因此，对于任何想解决这个问题的人来说，这都是解决方案。 div 中的 id 必须与以下元素的数据匹配。解释一下:

<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>

在示例中，div id 设置为“modal-iframe”。为了让按钮响应所有选项，按钮使用 data-izimodal-open="#modal-iframe"引用 ID。如果名称不匹配，则不会起作用。

重要提示:所有选项都必须在 div 中设置。在示例中，您会看到 *data-iziModal-title="My Title"设置正确。因此，如果放入 中，它将无法工作。

希望这对遇到同样问题的人有所帮助。

编辑

进一步澄清:JS 代码没问题。无需进行任何更改即可正常工作。当然，您可以更改它的选项。 HTML 中的选项始终优先于 JS 中设置的选项。