Fancybox仅在第二次单击后有效

Question

因此，我有一个表格，其中每个单元格都是游戏的名称，当您单击它时，它需要在fancybox中显示单击该单元格的用户的结果（我使用表Indexes获取GameID和Session变量来获取userID），它将用于从第二个PHP页面加载结果。

如果我第一次单击某个单元格，fancybox将不会显示任何内容，并且在关闭fancybox并再次单击任何单元格后，它仍能正常工作。 难道我做错了什么？

这是整个javascript：

$(".jogos").fancybox({
        'hideOnContentClick': true,       
        'onComplete':function(element)
        {

            var gameIdx = $(element).index();
            var cateIdx  = $(element).parent().parent().index();
            var gameIdxPHP;
            var catIdxPHP;
            var gameID;
            var userId = '<?php echo $_SESSION['userID']; ?>'

            <?php 
                for ($i=1; $i<= count($categoryArray);$i++)
                {
                    for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
                    {
                        ?>
                        catIdxPHP = '<?php echo $i ?>' -1;
                        gameIdxPHP = '<?php echo $j ?>' -1;

                        if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
                        {
                            gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
                            $("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
                        }

                        <?php
                    }
                }
            ?>


        }
    });

的HTML

<div style="display:none">
    <div id="data">
        <div id="graphic">
        </div>  
    </div>
</div>

链接的示例代码

<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >

Answer 1

您具有display：fancybox的父项上没有显示，因此没有显示grafic。

如果最初使用display：none，则Grafic元素不在dom之内。 尝试将clip：rect用作一个类，并使用fancybox回调添加/删除该类。

试试这个代码：

$('.jogos').fancybox({
        'onStart': function() {
            $("#data").removeClass('hidden');
        },
        'onClosed': function() {
            $("#data").addClass('hidden');
        }
});

CSS：

.hidden { 
  clip: rect(1px 1px 1px 1px);
  position: absolute;
)}

HTML：

<div>
  <div id="data" class="hidden">
    <div id="graphic">
    </div>  
  </div>
</div>