Question

我已经加载了大量的popup.js库来显示表单的弹出窗口。

HTML：

    <a class="popup-with-form" href="#test-form">Open form</a>

<form id="test-form" class="mfp-hide white-popup-block">
        <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" type="text" placeholder="Name" required="">
            </li>
            <li>
                <label for="email">Email</label>
                <input id="email" name="email" type="email" placeholder="example@domain.com" required="">
            </li>
            <li>
                <label for="phone">Phone</label>
                <input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" required="">
            </li>
            <li>
                <label for="textarea">Textarea</label>
                <br>
                <textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
            </li>
        </ol>
    </fieldset>
</form>

JS：

$(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';
                }
            }
        }
    });
});

这不会按预期在弹出窗口中显示表单。您可能会看到包含依赖项here

的示例

Answer 1

Magnific弹出窗口不会对弹出窗口应用任何样式。你必须自己做：http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type。如果你想让它看起来像他们的例子添加：

.white-popup-block {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

http://jsfiddle.net/yWpC4/3/

无法使用JQuery和magnific popup.js打开弹出窗口

1 个答案: