Question

我正在开发酒店预订和预订管理系统。

我有一系列场地，用户通过单选按钮选择。一旦他们选择了地图按钮，我想将场地名称，经度和纬度数据发送到Fancy Box窗口，这样Google地图就可以开始确定路线数据的过程，具体使用a route planning tutorial。

我试过......

function fancyboxLocation(href, venue, lo, la) {
   $.fancybox({
       'hideOnContentClick': true,
       'height': 430,
       'padding': 0,
       'width': 700, 
       'type': 'iframe',
       'href' : href,
       'venue': venue,
       'lo': lo,
       'la': la
   });
}

<a href="javascript:;" onclick="fancyboxLocation('<?php echo config_item('base_url'); ?>venues/locations/route', '<?php echo $venues['name']; ?>', '<?php echo $venues['longitude']; ?>', '<?php echo $venues['latitude']; ?>')" title="Plan Route">

虽然出现了窗口，但我的个人参数（场地，广场和广场）正在被剥离。

这些参数正在寻找进入fancyboxLocation函数的方法，但它们并没有进一步发展。

我是怎么做到的？

Answer 1

也许你可以调用ajax内容

$.fancybox({
    'hideOnContentClick': true,
    'height': 430,
    'padding': 0,
    'width': 700, 
    'type': 'iframe',
    'href' : href,
    'ajax' : {
        type    : "POST",
        data    : 'venue='+escape(venue)+'&lo='+escape(lo)+'&la='+escape(la)
    }
});

Answer 2

//准备好文档

const fancyFunction = (elementEvent) => {
    const cta = elementEvent.data('cta');
    elementEvent.fancybox({
        autoSize: false,
        autoPlay: true,
        width: 510,
        autoHeight: true,
        beforeLoad: () => {
            console.log('beforeLoad', cta);
        }
    });
};

$('.fancy-domec').each((i, e) => {
    fancyFunction($(e));
});

//在HTML上

    <div class="ctas">
        <p><a href="#fancy-domec" class="fancy-domec" data-cta="add">Add something</a></p>
        <p><a href="#fancy-domec" class="fancy-domec" data-cta="check">Check something</a></p>
    </div>

Answer 3

我知道这已经过时了，但我认为这可能有助于其他人。希望你一切正常。

FancyBox API有一个开放的方法，如下所示：

$.fancybox( [jQuery object] );

因此，您可以创建一个类似于以下仅使用上述方法的简单javascript函数。例如：

function displayFancybox(param1, param2) {
     // Open FancyBox
     $.fancybox(document.getElementById("myFancyBoxContainer"));

     // Do whatever you want with your parameters (maybe write them to a div)
     document.getElementById("someDiv").innerHTML = param1;

     // Or maybe initialize a google map
     initialize(param1, param2);
}

这是用户点击以触发FancyBox的html链接：

<a onclick="displayFancybox('some text', 'some more text');" href="#" title="Some Title">Click Me!</a>

将自定义参数传递给FancyBox

3 个答案: