javascript - fancybox 关闭后无法重新打开

Question

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

我无法找到任何其他人发生过这种情况的引用。我们有一个现场演示，您可以在此处查看行为:https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate(捐赠模式应该自动打开，但如果没有，请单击“支持我”)使用测试信用卡号(例如 4111111111111111)进行捐赠 - 显然，这实际上不会向您收取任何费用。

如果查看源代码，相关的 javascript 代码从第 162 行开始。 (我也会将其包含在本文末尾)。

我想也许是因为我在打开新模态之前没有明确关闭任何 fancybox 模态，但这并没有改变任何东西。因此，我愿意接受有关可能导致此问题的原因的建议。这很奇怪。

谢谢!

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

Answer 1

我们已经解决了这个问题。一双新的眼睛发现我们有一个显式的 fancybox.close() 调用，当单击“谢谢”模式的父级时会触发该调用(这是另一个功能的延续，我们有这样的模式，但用户无法重新启动) - 从同一页面打开它)。我们删除了它，它似乎已修复。