为什么我的弹出式造型搞砸了？ [英] Why is my popup styling messed up?
本文介绍了为什么我的弹出式造型搞砸了？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Magnific Popup创建一个弹出窗体。我从，然后点击打开表单在下弹出窗体并检查，您会看到 .white-popup-块的样式不包含在默认CSS 。您需要将这些样式应用于容器。
.white-popup-block {
background：#FFF;
padding：20px 30px;
text-align：left;
max-width：650px;
margin：40px auto;
position：relative;
}
I'm using Magnific Popup to create a popup form. I copied and pasted the code from the "Popup with Form" demo here, resulting in the following test file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/magnific/jquery.magnific-popup.js"></script>
<link rel="stylesheet" type="text/css" href="../css/magnificPopup.css" />
<script type="text/javascript">
$(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';
}
}
}
});
});
</script>
</head>
<body>
<!-- link that opens popup -->
<a class="popup-with-form" href="#test-form">Open form</a>
<!-- form itself -->
<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>
</body>
</html>
However, while the code from the demo displays like this:
The code from my test page displays like this:
What is going wrong?
解决方案
They have applied a custom CSS for the form.If you go to their demo site and click on the Open Form under Popup with form and inspect, you will see .white-popup-block has styles which is not included in the default CSS. You need to apply those styles to the container.
.white-popup-block {
background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
}
这篇关于为什么我的弹出式造型搞砸了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
