Question

我使用Magnific Popup创建弹出窗体。我复制并粘贴了＆＃34; Popup with Form＆＃34;演示lazy attribute evaluation，生成以下测试文件：

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

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

enter image description here

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

enter image description here

出了什么问题？

Answer 1

他们已为表单应用了自定义CSS。如果您转到他们的demo site并点击Open Form下的Popup with form并进行检查，您会看到.white-popup-block已default CSS中未包含的样式。您需要将这些样式应用于容器。

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

Fiddle

Answer 2

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

我已经添加了没有任何css表单的小提琴链接，因此它显示了

Plain Form

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

JqueryMobile Form

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

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

2 个答案:

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

2 个答案:

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