为什么在页面加载时加载放大弹出窗口时“找不到内容”？答案

【问题标题】：Why is "content not found" when loading magnific popup on page load?为什么在页面加载时加载放大弹出窗口时“找不到内容”？
【发布时间】：2018-12-19 03:57:50
【问题描述】：

在加载时打开放大的弹出窗口时，我得到了半透明的覆盖，但里面的文字说“找不到内容” 为什么是这样？

在控制台中，#test-modal 内的元素显示为灰色。

HTML

<div id="test-modal" class="mfp-hide subscribe__popup">
    <div class="subscribe--popup--wrapper">
       <p>Content here</p> 
    </div>
</div>

Javascript

$(document).ready(() => {
    setTimeout(() => {
        $.magnificPopup.open({
            items: {
                src: 'test-modal',
            },
            type: 'inline',
            preloader: true,
            modal: true,
        });
    }, 5000);
});

【问题讨论】：

不应该是src: '#test-modal'吗？

标签： jquery magnific-popup

【解决方案1】：

尝试使用src: '#test-modal', 或src: $('#test-modal'), 都可以。

注意：在src 中，它的值可以是HTML string, jQuery object, or CSS selector。

$(document).ready(() => {
    setTimeout(() => {
        $.magnificPopup.open({
            items: {
                src: $('#test-modal'),
            },
            type: 'inline',
            preloader: true,
            modal: true,
        });
    }, 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<div id="test-modal" class="mfp-hide subscribe__popup">
    <div class="subscribe--popup--wrapper">
       <p>Content here</p> 
    </div>
</div>

【讨论】：

【解决方案2】：

您应该将src: 'test-model' 更改为src: '#test-model'。

根据 magnific 文档，文本应该是

可以是 HTML 字符串、jQuery 对象或 CSS 选择器

【讨论】：