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

I'm using Magnific Popup to create a popup form. Everything works fine as long as I leave it inline, but if I try to move the form to an external file, I can't seem to load it in a popup.

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

As an example - taking the code from the "Popup With Form" demo here, I create the following file, which works as expected. Here is a working fiddle (courtesy of @anpsmn in response to a different question).

举个例子 - 从这里的“Popup With Form”演示中获取代码,我创建了以下文件,它按预期工作。这是一个工作小提琴(由@anpsmn提供,以回应另一个问题)。

However, I realized that I would like to use the same form in multiple places, so I tried to move the form to an external file. I called it MagnificForm.cfm (I will be working with ColdFusion code in my real form) and it contains just the form element:

但是,我意识到我想在多个地方使用相同的表单,所以我尝试将表单移动到外部文件。我称之为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="[e-mail]" required="" type="email">
             </li>
             <li>
                 <label for="phone">Phone</label>
                 <input id="phone" name="phone" placeholder="Eg. [phone]" 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>

Then I tried to modify the link that opens the pop-up to point to the file:

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

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

This doesn't work - results in an empty popup.

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

I also tried pointing to the form element specifically:

我也尝试过具体指向表单元素:

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

I also tried renaming the file to magnificForm.html. But I can't seem to get the content of the external file to load in the popup.

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

2 个解决方案

#1

Turns out I just needed to change type: 'inline' to type: 'ajax'.

结果我只需要改变类型:'inline'来输入:'ajax'。

#2

Thanks for the 'ajax' tip.

感谢'ajax'提示。

This may be dumb but incase anyone else comes here to see this solution and is using the example code and it just seems to not be working make sure you remove the class 'mfp-hide' from the example form. That class will keep the form hidden even if the page is in fact popping up. Hopefully that saves someone the 15 minutes I wasted.

这可能是愚蠢的,但是其他任何人来到这里看到这个解决方案并使用示例代码,它似乎没有工作确保从示例表单中删除类'mfp-hide'。即使页面实际上是弹出的,该类也会保持表单隐藏。希望能够节省15分钟我浪费的时间。