为什么我的弹出式样式混乱？答案

【问题标题】：Why is my popup styling messed up?为什么我的弹出式样式混乱？
【发布时间】：2015-04-29 07:25:17
【问题描述】：

我正在使用 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>

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

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

出了什么问题？

【问题讨论】：

能否请您使用外部 js 和 css 制作一个 jsFiddle 以帮助我们帮助您？
在你的 CSS 中试试这个：#test-form {display:block;//or inline-block}
需要给容器添加背景色。试试这个.white-popup-block {background: #fff;}
@anpsmn - 这确实有所帮助，尽管它看起来仍然与演示不同......格式不是内置在宏伟的 css 文件中吗？
@froadie 刚刚查看了他们网站上的演示（带有表单的弹出窗口）。他们为表单应用了自定义 css。 Here is the fiddle。如果您访问他们的演示站点并单击演示以弹出表单并检查，您会看到 .white-popup-block 具有我猜 CSS 中不包含的样式。

标签： jquery css magnific-popup

【解决方案1】：

他们为表单应用了自定义 CSS。如果您转到他们的 demo site 并单击 Popup with form 下的 Open Form 并检查，您将看到 .white-popup-block 具有不包含在 @ 中的样式987654322@。您需要将这些样式应用于容器。

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

Fiddle

【讨论】：

【解决方案2】：

您包含的关于 magnific-popup 的两个 js 和 CSS 表格不包含任何 CSS 样式，因此我们有责任按照我们的意愿设置form 的样式

我添加了小提琴链接，没有任何 css 的形式，所以它显示很简单

Plain Form

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

JqueryMobile Form

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

【讨论】：

demo的格式从何而来？我认为这就是宏伟的 css 文件的用途。
@froadie 没有宏伟的 CSS 文件仅包含创建具有背景颜色和额外内容的叠加层所需的 CSS，而我们在 POPUP 中使用的文本或表单或任何内容的内容取决于用户随心所欲地设计。