Fancybox 模态弹出内容未在 magento1 中正确加载？答案

【问题标题】：Fancybox modal popup content not loaded properly in magento1?Fancybox 模态弹出内容未在 magento1 中正确加载？
【发布时间】：2018-10-04 13:19:24
【问题描述】：

实际上，我遇到了弹出模式花式框问题，即弹出窗口未正确加载内容。模态 div 默认不显示。我需要在点击事件上显示该模式。

我正在使用包含此功能的 AfterPAy 付款方式模块。当我们点击了解更多按钮时，弹出窗口打开，但不是那个花哨的框中的内容。我需要让它完美。这是我的网站网址https://www.tradie.com/tradie-honey-badger-sports-mid-length-trunk-1371.html

(function($) {

    $(document).on('ready', function() {
        $('.afterpay-what-is-modal-trigger').fancybox({
			  afterLoad: function() {
                $('#afterpay-what-is-modal').css("display", "block");
            }
            afterShow: function() {
                $('#afterpay-what-is-modal').find('.close-afterpay-button').on('click', function(event) {
                    event.preventDefault();
                    $.fancybox.close();
                })
            }
        })
    });

})(jQuery);

以上js代码在扩展名为modal.js的文件中。这里的 aftershow 功能正在工作，但 afterload 不工作。请问该模式将如何正确打开内容。

谢谢。

【问题讨论】：

看来你用的是fancybox v1，最好升级到最新。
让我试着回复你@Janis
嘿@Janis 我已经检查并更新了 js 文件，但没有工作。你能帮我弄清楚吗？
1) 通过说“最新”，我想到的是 v3，而不是 8 年前的 v1； 2）我没有找到如何在您的页面上启动fancybox

标签： javascript jquery fancybox magento-1.9

【解决方案1】：

根据问题，有一个 div 内联设置为不显示。因此，当您点击链接/按钮时，由于该内联 css，模态将变为空白。

请找到模态文件的 html 并在该代码的顶部添加一个额外的 div 并将 display none 设置为该 div 内联。例如，

<div style="display:none;">
  <div id="afterpay-what-is-modal">
    <!--some modal code for popup-->
  </div>
</div>

在 div 之前添加一个 div 并将其设置为不显示任何内联。

希望这对你有用。

【讨论】：

先生，感谢您的更新，我会试试这个并告诉你。
当然@brst dev.