Fancybox 仅在第二次单击后才有效

Question

所以我有一个表格，其中每个单元格都是游戏的名称，当您单击它时，它需要在花式框中显示单击单元格的用户的结果（我使用表格索引来获取 GameID 和会话变量来获取用户 ID），它将用于从第二个 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

您的fancybox 的父级上有display:none，因此不会显示图形。

如果您最初使用 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>