1

我有一个可以加载内联内容的fancybox。当网站加载时，内容会在页面上呈现，并且在准备好文档时会显示fancybox。执行此操作的 HTML 和 javascript 如下；

HTML：

<div style="display: none">
    <div id="cookieContainer">
        <div class="splash">
            <!-- Some more content here -->
            <div class="buttons">
                <a href="javascript:parent.jQuery.fancybox.open({href : '<%=UrlRewriter.GetUrlForSystemName("MyPage")%>'})" class="cookie_button settings">Instellingen</a>
                <a href="javascript:void(0);" class="cookie_button accept">Accepteren</a>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT：

$(document).ready(function(){
          $("a#myUrl").fancybox({
                'closeClick': false,
                'modal': false,
                'closeBtn': false,
                'width': '400px',
                'height': '200px',
                'autoSize': false,
                'padding': 10,
                'margin': 0
            });

          $('a#myUrl').trigger('click');
});

花式框包含两个超链接。一个执行一些javascript（带有“cookie_button接受”类的按钮），另一个应该将用户发送到当前活动的fancybox中的特定url。

我已经尝试了Fancybox 网站上的各种选项，但都没有给我想要的结果。其中一个示例（带有 iFrame 的示例）具有我想要的功能，但是这个示例从一个类型为“iFrame”的花式框导航到另一个具有相同类型的花式框。我在这里要做的是从“inline”类型的fancybox导航到“iFrame”类型的fancybox。这甚至可能吗？还是有其他方法可以实现这一目标？

4

1 回答 1

2

这就是您可以在inline内容中执行的操作（注意我使用了呈现的 html）

<a id="myUrl" href="#cookieContainer">open fancybox</a>

<div style="display: none">
  <div id="cookieContainer">
    <div class="splash">
      <!-- Some more content here -->
      <div class="buttons"> 
        <a href="http://jsfiddle.net" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>
        <a href="javascript:void(0);" class="cookie_button accept" onclick="jQuery.fancybox.close()">Accepteren</a>
      </div>
    </div>
  </div>
</div>

顶部的链接是绑定到 fancybox ( #myUrl) 的选择器。

现在，关于inline内容中的按钮，第一个（Instellingen）不需要运行javascript来打开新的fancybox；在您的情况下，您可以将其设置为常规链接，例如：

<a href="<%=UrlRewriter.GetUrlForSystemName("MyPage")%>" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>

请注意，我向该链接添加了两个属性：

  • id="myUrl2": 绑定到 fancybox 的新选择器
  • data-fancybox-type="iframe": 所以下一个fancybox 将作为iframe 打开

然后是fancybox脚本： 

$(document).ready(function () {
  $("#myUrl, #myUrl2").fancybox({
    closeClick: false,
    closeBtn: false,
    width: 400,
    height: 200,
    autoSize: false,
    fitToView : false,
    padding: 10,
    margin: 0
  });
  $('a#myUrl').trigger('click');
});

请注意，我们将 fancybox 绑定到 fancybox 内外的选择器：

$("#myUrl, #myUrl2")

另请注意，我通过 and 更改了 and （'width': '400px'整数和布尔值不带引号和隐含的 'px'）。'height': '200px'width: 400height: 200

我还删除'modal': false了因为是默认值，并在fitToView : false您使用autoSize: false.

可选地，我添加onclick="jQuery.fancybox.close()"到“ Accepteren ”按钮，这样它会inline在点击后关闭fancybox，但你可能不需要它。

这将使您从您的幻想inline内容转移到幻想iframe内容。

见演示JSFIDDLE

于 2013-01-16T19:07:59.300 回答