앵커 대신 단추 요소에 magnific-popup 호출

Question

나는 ajax를 통해 내용을 가져 오는 폼을 표시하기 위해 magnific-popup을 사용하고 있습니다. 이 코드는 잘 작동 :

<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 - 팝업 코드에 href 속성을 인식하지 않습니다 < 버튼 > 요소.

어떻게해야합니까?

Answer 1

아마 너무 늦게는

... 버튼 없음 href 속성을 아스 커 초기없는 것이 아니라, 다른 사람 도움이 될 수 있습니다, 당신은 대신 "MFP-X"클래스 이름을 사용해야합니다.

나를 위해

"MFP-인라인"트릭을했지만 아약스를 위해 당신은 아마 이런 식으로 뭔가가 필요합니다

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

(확실하지 아약스에서이 필요하지만, 또한이 경우 "데이터 MFP를 대화 상자 div가 어디에 있는지 보여주는 "-src"attr ...)

Answer 2

Magnific과 함께하는 방법을 잘 모르겠습니다./부트 스트랩 템플릿을 사용하고 있습니까? 그렇다면 모달 대화 상자가 좋습니다. 간단한 데모 here. 희망이 도움이!

Answer 3

다른 해결책이 있습니다. ajax를 통해로드 된 팝업 용 magnific-popup API를 사용할 수 있습니다.

<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; 
});