如何将选项从 HTML 传递给 izimodal (JS)答案

【问题标题】：How to pass options over to izimodal (JS) from HTML如何将选项从 HTML 传递给 izimodal (JS)
【发布时间】：2019-09-10 00:21:03
【问题描述】：

想让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 中取出它，它将停止工作......就像该问题的另一个示例一样。

有谁知道这个脚本以及我可能错过了什么？

【问题讨论】：

标签： javascript jquery izimodal

【解决方案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 中设置的选项。

【讨论】：