Why is my popup styling messed up?
I am using Magnific Popup to create a popup form. I copied and pasted the code from the "Popup with Form" demo here , which resulted 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 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, so far the code from the demo looks like this:
My test page code looks like this:
What's going wrong?
source to share
They applied custom CSS to the form. If you go to the demo site and click Open Form
in the section Popup with form
and check, you will see that it .white-popup-block
has styles that are not included in the default CSS . You need to apply these styles to the container.
.white-popup-block {
background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
}
source to share
The two
js
andCSS
that you included in the magnific-popup list do not contain CSS styling for FORM, so it is our responsibility to styleform
as we wish
- I added a fiddle link without any css for the form to show plain
2, now I have added JQuery mobile to below JsFiddle, now let's see how the form looks like.
You need to style the content of the form.
source to share