花式框模式弹出内容未在 magento1 中正确加载?

Question

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

我正在使用包含此功能的 AfterPAy 付款方式模块。当我们单击"了解更多"按钮时，弹出窗口将打开，但不会打开该花哨框中的内容。我需要让它变得完美。这是我的网站 URl 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代码在扩展模态.js的文件中。在这里，aftershow 函数正在工作，但 afterload 不起作用。请问该模式将如何正确打开内容。

谢谢。

Answer 1

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

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

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

在 之前添加一个div 并设置其样式以内联显示任何内容。

希望这对你有用。