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

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规则,<button>标记不能位于<a>标记中.

所以我将html代码更改为:

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

但是magnific-popup代码无法识别<button>元素上的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的位置......)