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

Jquery 如何从外部文件中提取弹出内容?,jquery,magnific-popup,Jquery,Magnific Popup,我正在使用放大弹出创建一个弹出窗体。只要我让表单保持内联状态,一切都可以正常工作,但是如果我试图将表单移动到外部文件,我似乎无法在弹出窗口中加载它 作为一个例子——从“带窗体的弹出窗口”演示中获取代码,我创建了以下文件,该文件按预期工作。这是一份工作报告(由@anpsmn提供,以回应a) 然而,我意识到我想在多个地方使用同一个表单,所以我尝试将表单移动到一个外部文件中。我将其命名为MagnificForm.cfm(我将在实际表单中使用ColdFusion代码),它只包含表单元素: <for

我正在使用放大弹出创建一个弹出窗体。只要我让表单保持内联状态,一切都可以正常工作,但是如果我试图将表单移动到外部文件,我似乎无法在弹出窗口中加载它

作为一个例子——从“带窗体的弹出窗口”演示中获取代码,我创建了以下文件,该文件按预期工作。这是一份工作报告(由@anpsmn提供,以回应a)

然而,我意识到我想在多个地方使用同一个表单,所以我尝试将表单移动到一个外部文件中。我将其命名为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。但是我似乎无法在弹出窗口中加载外部文件的内容。

结果表明,我只需要将
类型:“inline”
更改为
类型:“ajax”
感谢“ajax”提示


这可能很愚蠢,但如果其他人来看这个解决方案,并且正在使用示例代码,但它似乎不起作用,请确保从示例表单中删除类“mfp hide”。该类将保持表单隐藏,即使页面实际上正在弹出。希望这能帮某人节省我浪费的15分钟。

jquery.load可能就是你需要的:请不要用“谢谢”作为问题的答案。此外,这并不能回答这个问题。若要评论或要求作者澄清,请在其帖子下方留下评论。你可以随时对自己的帖子发表评论,一旦你发表了评论,你就可以发表评论了。