Fancybox modal popup content not loaded properly in magento1?

Question

Actually I got the popup modal fancy box problem where the popup is not loaded the content properly. The modal div is by default to display none. And I need to show that modal on click event.

I am using the module for AfterPAy payment method where this feature is included. When We click on the learn more button then the popup is open but not the content in that fancy box. I need to make it perfect. This my website 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);

The above js code is in the file of extension modal.js. Here the aftershow function is working, but afterload is not working. Please how that modal will open properly with content.

Thanks.

Answer 1

As per the concern there is a div that is inline set to display none. So when you will hit the link/button then the modal will blanks due to that inline css.

Please find the html of the modal file and add an extra div at the top of that code and set display none to that div inline. e.g.,

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

Add a div before the and style it to display none inline that it.

Hope this will work for you.