关闭后fancybox无法重新打开答案

【问题标题】：fancybox not reopening after closing it关闭后fancybox无法重新打开
【发布时间】：2018-08-16 20:09:59
【问题描述】：

我们正在使用 fancybox 2 在我们的应用中启动捐赠流程。完成后，模式关闭并打开另一个“谢谢”模式。如果您关闭“谢谢”模式并再次单击“捐赠”按钮，我们会看到一些奇怪的行为。模态背景覆盖短暂出现然后消失，并且模态不显示。但是，如果您再次单击它，它就可以正常工作了。

我还没有找到任何关于这件事发生在其他人身上的参考资料。我们有一个现场演示，您可以在这里看到行为：https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate （捐赠模式应该会自动打开，但如果没有，请单击“支持我”）使用测试信用卡号（例如 4111111111111111）进行捐赠——显然，这实际上不会向您收取任何费用。

如果您查看源代码，相关的 javascript 代码从第 162 行开始。（我也会在本文末尾附上）。

我想这可能是因为在打开新的模态框之前我没有明确关闭任何花式框，但这并没有改变任何东西。因此，我愿意就可能导致这种情况的原因提出建议。这很奇怪。

谢谢！

相关JS：

<script type="text/javascript">
    jQuery(function($) {
        openExpressDonate = function() {
            $.fancybox({
                    closeBtn: false,
                    closeEffect: 'none',
                    helpers : {
                        overlay : {
                            closeClick: false,
                            css: {'background-color': 'rgba(0, 0, 0, 0.60'},
                            locked: true
                        }
                    },
                    href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
                    margin: 0,
                    maxWidth: 400,
                    height: 'auto',
                    openEffect: 'none',
                    padding: 1,
                    scrolling: 'no',
                    type: 'iframe'
                });
        }

        $('.js-express-donate').on('click', function(e) {
                e.preventDefault();

                if (window.ga) {
                    ga('send', {
                            hitType: 'event',
                            eventCategory: 'Express Donate - Participant',
                            eventAction: 'Donation Started',
                            eventLabel: 'Event 1183'
                        });
                }

                openExpressDonate();
            });

        if (location.hash && location.hash == '#donate') {
            $('.js-express-donate').click();
        }

        resizeExpressDonateModal = function() {
            $.fancybox.update();
        }

        showExpressDonateThankYou = function(target, data) {
            $.fancybox({
                    afterShow: function () {
                        fancyParent = $('.fancybox-wrap').parents(); // normally html and body
                        fancyParent.on('click.modalThanks', function () {
                            $.fancybox.close();
                            fancyParent.off('click.modalThanks');
                        });
                        $('.fancybox-wrap').on('click', function (event) {
                            // prevents closing when clicking inside the fancybox wrap
                            event.stopPropagation();
                        });
                    },
                    helpers : {
                        overlay : {
                            closeClick: false,
                            css: {'background-color': 'rgba(0, 0, 0, 0.60'},
                            locked: true
                        }
                    },
                    href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
                    margin: 0,
                    maxWidth: 400,
                    minHeight: 300,
                    modal: 1,
                    openEffect: 'none',
                    padding: 1,
                    scrolling: 'no',
                    type: 'iframe'
                });
        }
    });
</script>

【问题讨论】：

标签： javascript fancybox-2

【解决方案1】：

我们已经解决了这个问题。一组新的眼睛发现我们有一个明确的 fancybox.close() 调用，当单击“谢谢”模态的父级时触发（这是我们拥有这样一个模态的另一个功能的保留，但用户无法重新- 从同一页面打开它）。我们删除了它，它似乎已修复。

【讨论】：