magnific-popup - フォームに値を渡す方法

Question

magnify-popup を使用してフォームを表示しています。このフォームにいくつかの値を渡したいと思います。これを行うにはどうすればよいですか。ドキュメントでこれを見つけることができませんでした。

$('#rangeBtn').magnificPopup({
    items: {
        src: '#rangeFormDiv',
        type: 'inline'
    }

});

ありがとう

Answer 1

サンプル rangeFormDiv:

<div id="rangeFormDiv">
  <form>
    <input type="text name="var1" value="">
    <input type="text name="var2" value="">
    <input type="text name="var3" value="">
    <input type="submit" value="save">
  </form>
</div>

アンカー：

<a href="#rangeFormDiv" data-variable="some content" class="magnificPopup">Open</a>

magnificPopup の初期化:

$('.magnificPopup').magnificPopup({
    type: 'inline',

    fixedContentPos: false,
    fixedBgPos: true,

    overflowY: 'auto',

    closeBtnInside: true,
    preloader: false,

    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in',
    modal: true,
    //define variable before open
    //target element: $($(this.items).attr('href'))
    //anchor: $(this.items)
    callbacks: {
        beforeOpen: function(){
            $($(this.items).attr('href')).find('input[name="var1"]').val($(this.items).data("variable"));
        }
    }
});