Calling magnific-popup on button element instead of an anchor - magnific-popup

Question

I'm using magnific-popup to show a form getting the contents via ajax. This code works fine:
<a href="/entry-form" class="ajax-popup-link">
<button class="green">Enter Now</button></a>
...
<script>
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
</script>
But according to HTML5 rules a <button> tag can't be in an <a> tag.
So I changed the html code to:
<button class="green" href="/entry-form" class="ajax-popup-link">Enter Now</button>
But the magnific-popup code doesn't recognize the href attribute on the <button> element.
How should I do this?

Answer 1

Probably too late to initial asker, but might help someone else...
No href attribute to button, you need to use "mfp-X" class names instead.
For me "mfp-inline" did the trick, but for ajax you need probably something like this:
<button class="ajax-popup-link mfp-ajax green" data-mfp-src="#div_element">Enter Now</button>
...
$('.ajax-popup-link').magnificPopup();
(Not sure if in ajax you need this, but there is also "data-mfp-src" attr that shows where dialog div is...)

Answer 2

I have another solution. You can make use of magnific-popup API for popup loaded via 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

Not sure how to do this with Magnific. Have you considered/Are you using a Bootstrap template? If so, it has a nice modal dialog. Simple demo here. Hope this helps!