如何从外部文件中提取弹出内容？

Question

我正在使用Magnific Popup来创建弹出窗体。只要我将其保留为内联，一切正常，但如果我尝试将表单移动到外部文件，我似乎无法在弹出窗口中加载它。

作为示例 - 从“弹出表单”演示here中获取代码，我创建了以下文件，该文件按预期工作。这是一个有效的fiddle（由@anpsmn提供以回应different question）。

但是，我意识到我想在多个地方使用相同的表单，所以我尝试将表单移动到外部文件。我称之为MagnificForm.cfm（我将以我的真实形式使用ColdFusion代码）并且它只包含表单元素：

<form id="test-form" class="white-popup-block mfp-hide">
     <h1>Form</h1>
     <fieldset style="border:0;">
         <p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
         <ol>
             <li>
                 <label for="name">Name</label>
                 <input id="name" name="name" placeholder="Name" required="" type="text">
             </li>
             <li>
                 <label for="email">Email</label>
                 <input id="email" name="email" placeholder="example@domain.com" required="" type="email">
             </li>
             <li>
                 <label for="phone">Phone</label>
                 <input id="phone" name="phone" placeholder="Eg. +447500000000" required="" type="tel">
             </li>
             <li>
                 <label for="textarea">Textarea</label><br>
                 <textarea style="width: 139px; height: 54px;" id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
             </li>
         </ol>
     </fieldset>
 </form>

然后我尝试修改打开弹出窗口指向文件的链接：

<!-- link that opens popup -->
<a class="popup-with-form" href="magnificForm.cfm">Open form</a>

这不起作用 - 导致空弹出窗口。

我还尝试专门指向表单元素：

<!-- link that opens popup -->
<a class="popup-with-form" href="magnificForm.cfm#test-form">Open form</a>

我也尝试将文件重命名为magnificForm.html。但我似乎无法在弹出窗口中加载外部文件的内容。

Answer 1

原来我只需将type: 'inline'更改为type: 'ajax'。

Answer 2

感谢＆＃39; ajax＆＃39;尖端。

这可能很愚蠢，但是其他任何人都来这里看到这个解决方案，并且正在使用示例代码，它似乎无法正常工作，请确保删除该类＆＃39; mfp-hide＆＃39;从示例表单。即使页面实际上是弹出的，该类也会保持表单隐藏。希望这可以节省15分钟我浪费的时间。