open Foundation 模态如何动态加载

Question

我正在使用 $.load() 函数加载 html 内容。在其中，我列出了带有按钮的卡片，单击该按钮应打开 Foundation 模式：

<button class="button button--modal-info button--modal-info--white user-area-card-modal-info" data-open="<?php echo 'user-area-card-' . $post_id . '-modal'; ?>" aria-controls="<?php echo 'user-area-card-' . $post_id . '-modal'; ?>" aria-haspopup="true" tabindex="0">
        <i class="icon-info"></i>
</button>

<div class="modal modal--info tiny reveal" id="legend-modal" data-reveal>

<button class="close-button modal__close-btn" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
</button>

<div class="modal__content">

    <p><?php echo get_field( '_m_legend_modal_description' ); ?></p>

</div>

现在我（以某种方式）解决了我的问题：

$('body').on('click', '.user-area-card-modal-info', function() {
    const open_id = $(this).data('open');
    new Foundation.Reveal($('#' + open_id)).open();
});

但通常如果我打开和关闭模式，后者会关闭，但覆盖仍然存在

我该如何解决？

Answer 1

我是这样解决的：

我在动态生成的内容中包含了模式
使用 attribute/hidden 字段获取文本并将其放入模态

open Foundation 模态如何动态加载

How open Foundation modal loaded dynamically

html

css

jquery

zurb-foundation