0

我正在使用 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 规则 <button> 标签不能在 <a> 标签中。

所以我将html代码更改为：

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

但是 magnific-popup 代码无法识别 <button> 元素上的 href 属性。

我该怎么做？

4

3 回答 3

6

最初询问可能为时已晚，但可能会帮助其他人......

按钮没有 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”属性显示对话框 div 的位置......）

于 2013-11-25T18:49:11.383 回答
0

我有另一个解决方案。您可以使用 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;
});
于 2015-12-23T20:19:09.887 回答
-1

不知道如何用 Magnific 做到这一点。您是否考虑过/是否正在使用 Bootstrap 模板？如果是这样，它有一个很好的模态对话框。简单的演示在这里。希望这可以帮助！

于 2013-09-09T20:09:47.820 回答