Question

我正在使用magnific-popup来显示一个通过ajax获取内容的表单。这段代码工作正常：

<a href="/entry-form" class="ajax-popup-link">
  <button class="green">Enter Now</button></a>
...
<script>
$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
</script>

但根据HTML5 rules a <button> tag can't be in an <a> tag.

所以我将html代码更改为：

<button class="green" href="/entry-form" class="ajax-popup-link">Enter Now</button>

但是，magnific-popup代码无法识别＆lt; button＆gt;上的href属性。元件。

我该怎么做？

Answer 1

对于最初的提问者来说可能为时已晚，但可能会帮助其他人...

没有href属性到按钮，你需要使用“mfp-X”类名。

对我来说，“mfp-inline”就是诀窍，但是对于ajax你可能需要这样的东西：

<button class="ajax-popup-link mfp-ajax green" data-mfp-src="#div_element">Enter Now</button>
...
$('.ajax-popup-link').magnificPopup();

（不确定在ajax中你是否需要这个，但是还有“data-mfp-src”attr显示对话框div的位置......）

Answer 2

我有另一个解决方案。您可以使用magnific-popup API通过ajax加载弹出窗口：

<button data-ajax-popup-url="URL">Изменить</button>
...
$('[data-ajax-popup-url]').click(function() {
    $.ajax({
        url: $(this).data('ajax-popup-url')
    })
        .success(function(response, textStatus, request){
            var popup = $(response);
            $.magnificPopup.open({
              items: {
                src: popup, // can be a HTML string, jQuery object, or CSS selector
                type: 'inline'
              }
            });
        });

    return false;
});

Answer 3

不确定如何使用Magnific执行此操作。您是否考虑过/您使用的是Bootstrap模板吗？如果是这样，它有一个很好的模态对话框。简单演示here。希望这有帮助！

在按钮元素上调用magnific-popup而不是锚点

3 个答案: