Why is my popup styling messed up?

问题

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?

回答1:

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;
}

Fiddle

回答2:

The two js and CSS you have included regarding magnific-popup dont contain any CSS styling for the FORM so its our responsibility to style the form as we wish

I have addached the fiddle link without any css for form so it show's plain

Plain Form

2, Now i have added Jquery mobile to the below JsFiddle now look how the form looks.

JqueryMobile Form

You have to style the form content.

来源：https://stackoverflow.com/questions/29936959/why-is-my-popup-styling-messed-up

标签

jquery

css

magnific-popup