Fancybox 弹出关闭按钮未显示答案

【问题标题】：Fancybox popup close button not showingFancybox 弹出关闭按钮未显示
【发布时间】：2014-07-13 12:39:35
【问题描述】：

知道为什么关闭按钮没有出现在我的时事通讯弹出框中吗？

非常感谢

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

【问题讨论】：

标签： javascript jquery html fancybox fancybox-2

【解决方案1】：

当你设置时

modal: true

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

您可以删除modal 选项（默认为false）或将其设置为false

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

【讨论】：

感谢您的回答。问题是，如果我不将该框设置为模态框，我将无法在时事通讯电子邮件字段中输入任何内容（根据您在这篇文章 goo.gl/oxrUdP 中的建议）。有替代方案吗？（关闭按钮并能够更新字段）。非常感谢
@Greg 确保将closeClick 设置为false。了解更多stackoverflow.com/a/9732878/1055987

【解决方案2】：

尝试使用：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：