为什么我的弹出式样格搞砸​​了？

我正在使用Magnific Popup来创建弹出窗体。 我复制并粘贴了“Popup with Form”演示中的代码，生成以下测试文件：

       $(document).ready(function() { $('.popup-with-form').magnificPopup({ type: 'inline', preloader: false, focus: '#name', // When elemened is focused, some mobile browsers in some cases zoom in // It looks not nice, so we disable it: callbacks: { beforeOpen: function() { if($(window).width() < 700) { this.st.focus = false; } else { this.st.focus = '#name'; } } } }); });     Open form  
 
Form
 
 
Lightbox has an option to automatically focus on the first input. It's strongly recommended to use inline popup type for lightboxes with form instead of ajax (to keep entered data if the user accidentally refreshed the page).
 
 
 Name  
 
 Email  
 
 Phone  
 
 Textarea
 Try to resize me to see how popup CSS-based resizing works. 
 
 
 
   

但是，虽然演示中的代码显示如下：

我的测试页面中的代码显示如下：

出了什么问题？

Answer 1

他们为表单应用了一个自定义CSS。如果你去他们的演示站点并点击Popup with form下的Open Form并检查，你会看到.white-popup-block样式不包含在默认的CSS中 。 您需要将这些样式应用于容器。

 .white-popup-block { background: #FFF; padding: 20px 30px; text-align: left; max-width: 650px; margin: 40px auto; position: relative; } 

小提琴

Answer 2

关于magnific-popup你包含的两个js和CSS不包含FORM的任何CSS样式，所以我们有责任按照我们的意愿设置form样式

1. 我已经添加了小提琴链接，没有任何forms的CSS，所以它显示的很简单

普通表格

2，现在我已经将Jquery mobile添加到下面的JsFiddle中，现在看看表单的外观。

JqueryMobile表单

您必须设置表单内容的样式。