Question

在我的主页上，我建立了以下链接：

<a href="#ACCT2251" class="fancybox">ACCT 2251</a>

根据#id加载以下内联html内容：

<div class="pop_up" id="ACCT2251">
    <!-- note these divs are hidden by css class -->
    .
    .
    <a href="#ACCT2252">ACCT 2252</a>
</div>

<div class="pop_up" id="ACCT2252">
    <!-- note these divs are hidden by css class -->
    .
    .
    <a href="#ACCT2251">ACCT 2253</a>
</div>

那部分正在发挥作用。我遇到的问题是链接到活动fancybox叠加层中的另一个内联html #id。查看上面的示例，您会注意到每个内联html div包含指向另一个内联html div的链接。尽管链接的构建方式与主页链接的格式相同，但它不起作用。关于如何使这项工作的任何想法？

提前致谢！

Answer 1

你需要正确地调用它

HTML： -

  <a class="fancyTrigger" href="#TheFancybox">hi</a>
    <hr>
    <div id="TheFancybox">Just adding a paragraph to demonstrate that you can dynamically create HTML content within a DIV using <a class="fancyTrigger1" href="#TheFancybox1">hi</a> 
       </div>
     <div id="TheFancybox1">Just adding a paragraph to demonstrate that you can dynamically create HTML content within a DIV using</div>
    Powered by <a href="http://fancybox.net/" target="_blank">Fancybox</a>

CSS： -

/*  Note that the fancybox css file is loaded under the 
"Add Resources" tab to the left.  Normally you would load it in your <head> */

body {
   background-color: #eef;     
}
#TheFancybox,#TheFancybox1 {
    display: none;
}

Jquery： -

// Note that the fancybox js file is loaded under the 
// "Add Resources" tab to the left.  Normally you would load it in your <head>


$(".fancyTrigger,.fancyTrigger1").fancybox();

可以找到演示Here

Answer 2

是的，有可能。你可以这样做：

HTML：

<a class="various" href="#inline">Inline</a>

<div id="inline" style="width: 500px; display: none;">
    <h2 id="first-half">First Half</h2>
    <a href="#second-half">Take me to Second Half</a>
    <p>Some text.</p>

    <h2 id="second-half">Second Half</h2>
    <a href="#first-half">Take me to First Half</a>
    <p>Some text.</p>
</div>

JS：

$(document).ready(function () {
    $(".various").fancybox({
        maxWidth: 800,
        maxHeight: 200,
        fitToView: false,
        width: '70%',
        height: '70%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none'
    });
});

的jsfiddle

请查看此jsFiddle以供参考。

干杯！

Fancybox：从活动叠加层中链接到另一个内联html div

2 个答案:

HTML：

JS：

的jsfiddle