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

Question

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

我正在使用包含此功能的 AfterPAy 付款方式模块。当我们单击“了解更多”按钮时，弹出窗口会打开，但不会打开那个花哨的框中的内容。我需要让它变得完美。这是我的网站URlhttps://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 不工作。请问该模式如何正确打开内容。

谢谢。

Answer 1

根据问题，有一个 div 内联设置为显示 none。因此，当您点击 link/button 时，由于内联 css.

，模态框将空白

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

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

在之前添加一个 div 并设置样式以显示 none 内联它。

希望这对你有用。

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

Fancybox modal popup content not loaded properly in magento1?

javascript

jquery

fancybox

magento-1.9