嵌入式 Eventbrite 结帐小部件可防止页面在关闭时滚动答案

【问题标题】：Embedded Eventbrite checkout widget prevents page scroll upon close嵌入式 Eventbrite 结帐小部件可防止页面在关闭时滚动
【发布时间】：2020-05-16 12:16:46
【问题描述】：

我正在我们的网站上创建一个活动页面并集成 Eventbrite 结帐模式，以保持我们网站上的购票体验。在用户退出模式之前，整个事情似乎运行良好。模式消失后，网站页面不会响应滚动。有什么想法吗？

这是已发布的网站，您可以查看嵌入的代码。单击任何“获取您的票”按钮以触发 Eventbrite 结帐模式。加载后，点击右上角的“X”尝试退出：
https://the-startup-story.webflow.io/events/startup-story-live-dallas

这是我的预览链接，您可以查看代码：
https://preview.webflow.com/preview/the-startup-story?utm_medium=preview_link&utm_source=designer&utm_content=the-startup-story&preview=1a5291aabf7762f0ee1084e522fdec25&pageId=5df01420ac038e5da652cd38&mode=preview

我联系了 Eventbrite 支持，我们尝试使用默认代码（没有我的任何按钮自定义），不幸的是，这并没有解决问题。

这是 Eventbrite 嵌入式结帐在其他地方正常工作的示例：
https://www.thenewparish.com/

感谢观看！

【问题讨论】：

找到解决方案了吗？
是的，问题是我有几个链接到结帐小部件的按钮，显然你只能有一个。我删除了所有拉出小部件的按钮，但它起作用了。

标签： widget eventbrite webflow

【解决方案1】：

嵌入代码看起来像

<button id="eventbrite-widget-modal-trigger-136611252222" type="button">Buy Tickets</button>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '136611252222',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-136611252222',
        onOrderComplete: exampleCallback
    });
</script>

每个页面上可以有多个，但你需要调整一些东西以避免破坏滚动的错误。

主要问题是将 exampleCallback 保留为 exampleCallback，因为您将尝试触发在多个位置定义的函数

要么重命名每个按钮中的 exampleCallback，要么删除重复的函数

此外，您应该将按钮的 id 和 modalTriggerElementId: 更改为唯一

【讨论】：