Fancybox: Linking to another inline html div from within active overlay

问题

On my main page I have the following link(s) built out:

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

Which loads the following inline html content based on #id:

<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>

That part is working. The issue I am running into is linking to another inline html #id from the active fancybox overlay. Looking at the example above you will notice that each inline html div contains a link to another inline html div. Although the link is built out in the same format as the main page link it does not work. Any ideas on how to make this work?

Thanks in advance!

回答1:

You need to have called it properly

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();

A demo can be found Here

回答2:

Yes, it is possible. You can do:

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

Check out this jsFiddle for reference.

Cheers!

来源：https://stackoverflow.com/questions/27398185/fancybox-linking-to-another-inline-html-div-from-within-active-overlay

标签

jquery

html

css

fancybox