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

Question

我正在使用Magnific Popup创建一个弹出窗体。一切工作正常，只要我离开它内联，但如果我试图将窗体移动到外部文件，我似乎无法加载它在弹出窗口。

举一个例子 - 从“Popup With Form”演示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

感谢您的'阿贾克斯'提示。

这可能是愚蠢的，但任何其他人来这里看到这个解决方案，并使用示例代码，它似乎不工作，确保您从示例窗体中删除类'mfp-hide'。即使页面实际上弹出，该类仍将隐藏窗体。希望能省下15分钟我浪费的人。