0

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?

Community
  • 1
  • 1
Dan
  • 802
  • 1
  • 9
  • 19

3 Answers3

6

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...)

Rohtsalu
  • 76
  • 1
  • 4
0

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;
});
vvkuznetsov
  • 1,056
  • 1
  • 9
  • 16
-1

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!

Craig
  • 49
  • 1
  • 9