need to add fancybox-error class alert (javascript issue)

[JuanTomas]

Using PS 1.6.1.2

 

On the front-office shipping page in checkout process, there's a fancybox alert that pops up if you try to Continue without checking the box for terms and conditions: "You must agree to the terms of service before continuing."  The alert is modal and darkens the entire browser tab.  Clicking anywhere on the page dismisses the alert.

 

I need to make a similar alert appear, conditionally, on the payment page.  Some of our products are sold internationally, subject to export license.  In that case I want to force the customer to acknowledge the export license requirements before paying.

 

I wrote a handler for displayPaymentTop hook.  To display the alert, I copied some HTML from the shipping page.

public function hookDisplayPaymentTop($params) {
    if (exportLicenseRequired()) {
        return('<div style="display: block; width: auto; height: auto;" class="fancybox-overlay fancybox-overlay-fixed">
                    <div style="opacity: 1; overflow: visible; height: auto; width: 394px; position: absolute; top: 312px; left: 756px;" class="fancybox-wrap fancybox-desktop fancybox-type-html fancybox-opened" tabindex="-1">
                        <div style="padding: 0px; width: auto; height: auto;" class="fancybox-skin">
                            <div class="fancybox-outer">
                                <div style="overflow: auto; width: 394px; height: auto;" class="fancybox-inner">
                                    <p class="fancybox-error">My Export License Required Message!</p>
                                </div>
                            </div>
                            <a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>
                        </div>
                    </div>
                </div>') ;
            }
        }
    }

The alert displays at the right time and looks mostly correct (I need to tweak a few style settings).

 

THE PROBLEM: the alert can never be dismissed, and it's modal so it prevents all actions on the browser tab.  I don't see where this alert has any provision for a click handler (don't know much about fancybox).  My understanding is, href="javascript:;" means "do nothing".  What do I have to add, to make this alert fancybox dismiss with a click?

 

Thanks for any help!

[rocky]

Try changing:

<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>

to:

<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" onclick="$.fancybox.close()"></a>