javascript - 在事件的内联 fancybox 中打开 url

Question

我有一个 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');
});

fancybox 包含两个超链接。一个执行一些 javascript(带有“cookie_button accept”类的按钮)，另一个应该将用户发送到当前事件的 fancybox 内的特定 url。

我已经尝试了 Fancybox website 中的各种选项，但他们都没有给我想要的结果。其中一个示例(带有 iFrame 的示例)具有我想要的功能，但是这个示例从类型为“iFrame”的花式框导航到另一个具有相同类型的花式框。我在这里要做的是从“内联”类型的花式框导航到“iFrame”类型的花式框。这可能吗？或者还有其他方法可以实现这一目标吗？

Answer 1

这就是您可以在 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>

顶部的链接是绑定(bind)到 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" : 要绑定(bind)到 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 绑定(bind)到 fancybox 外部和内部的选择器:

$("#myUrl, #myUrl2")

另请注意，我将 'width': '400px' 和 'height': '200px' 更改为 width: 400 和 高度:200(整数和 bool 值不带引号，隐含“px”)。

我还删除了 'modal': false 因为它是默认值并添加了 fitToView : false 因为您正在使用 autoSize: false。

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

这将使您从 fancybox inline 内容转移到 fancybox iframe 内容。

查看演示 JSFIDDLE