1

想让iziModal工作。作为初学者，文档有点令人生畏。

它工作正常，但我无法将可用选项传递给脚本。相关文档位于“数据属性”下。

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

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

4

1 回答 1

2

知道了。

文档有些不清楚。因此，这也是任何试图解决这个问题的人的解决方案。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 中设置的选项。

于 2019-09-10T07:57:58.753 回答