magnific-popup - 如何将值传递给表单

Question

我正在使用放大弹出窗口来显示表单。我想将一些值传递给这个表单。我怎么能这样做。我在文档中找不到这个。

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

});

谢谢

Answer 1

您可能会在回调中获取表单，然后将值插入到表单中。

所以它可能看起来类似于：

$('#rangeBtn').magnificPopup({
    items: {
        src: '#rangeFormDiv',
        type: 'inline'
    },
    callbacks: {
         beforeOpen: function() {
             // Your logic here
         }
    }
 });

有关更多信息，请查看API 页面。

Answer 2

示例 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"));
        }
    }
});