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

Question

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

<!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>

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

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

出了什么问题？

Answer 1

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

我添加了 fiddle link 没有任何 css 的形式所以它显示的很简单

Plain Form

2，现在我已经在下面的 JsFiddle 中添加了 Jquery mobile 现在看看表单的样子。

JqueryMobile Form

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

Answer 2

他们已经为你去他们 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 的 form.If 应用了自定义 CSS。您需要将这些样式应用于容器。

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

Fiddle

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

Why is my popup styling messed up?

css

jquery

magnific-popup