如何动态加载打开Foundation modal答案

【问题标题】：How open Foundation modal loaded dynamically如何动态加载打开Foundation modal
【发布时间】：2018-01-24 09:01:03
【问题描述】：

我正在使用 $.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();
});

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

我该如何解决？

【问题讨论】：

标签： jquery html css zurb-foundation

【解决方案1】：

我是这样解决的：

我将模态包含在动态生成的内容中
获取具有属性/隐藏字段的文本并将其放入模式中

【讨论】：