Question

知道为什么关闭按钮没有出现在我的简报弹出框中？

非常感谢

  <script type="text/javascript">
function openFancybox() {
    setTimeout(function () {
        $.fancybox('#newsletterpopup', {
            modal: true, // this prevents fancybox to close unless close unless ".non-merci" is clicked
            showCloseButton: true,
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(58, 42, 45, 0.3)'
                    }
                }
            },
            afterShow: function () {
                // enables a way to close fancybox
                $(".non-merci").on("click", function () {
                    $.fancybox.close()
                });
            }
        });
    }, 1000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 0.0001
    });
});
</script>

Answer 1

设置

时

modal: true

关闭按钮将从不显示，无论closeBtn设置为true。

您要么删除modal选项（默认为false），要么将其设置为false

注意 showCloseButton是fancybox v1.3.x的一个选项。

Answer 2

尝试使用：

closeBtn:'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'代替showCloseButton。

尝试使用jQuery 1.8或更低版本而不是1.10

Answer 3

这取决于您使用的工具。我使用gulp并且我注意到文件（fancybox_sprite.png）在那里，但路径可能是错误的，特别是如果你使用gulp为你编译。有时它们可能会被放错地方。将图像托管在云端或更正文件的路径。

希望这会有所帮助。此外，如果您想确认您确实拥有正确的配置，可以使用检查器检查是否有.fancybox-close类。如果它在那里，那么这意味着你的路径没有指向png文件。

Answer 4

基于Fancybox的最新模式示例，您可以将关闭按钮与modal: true一起添加到DOM。

$('#newsletterpopup').fancybox({
    modal: true,
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(58, 42, 45, 0.3)'
            }
        }
    },
});

#trueModal{
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<a data-fancybox="" data-src="#trueModal" data-modal="true" href="javascript:;">Open modal</a>

<div id="trueModal">
  <div>Your content</div>
  <button data-fancybox-close>Close modal</button>
</div>

Fancybox弹出关闭按钮不显示

4 个答案: