php - Javascript Fancybox 2 关闭按钮/链接事件不起作用

Question

我使用 Fancybox 2 创建一个条款和条件弹出窗口，显示当用户登录我们的 WordPress 网站时，该内容是从 div 标签检索的，并使用 php 从 WordPress 页面查找正确的内容。他们需要单击接受按钮才能继续并关闭弹出窗口，此链接是在 div 标签内生成的。使用单独的 php 文件，将他们的用户 ID 添加到表中，该表显示他们已接受 ts 和 cs。除了“接受”按钮之外，一切正常。当我单击“接受”链接时，窗口不会完全关闭，它仍保留在屏幕上，但当我的表使用用户 ID 更新时，会触发 onclose 事件。当我单击内容(包括链接)上的任意位置时，我可以看到窗口快速进出。所以我猜测在 fancybox 顶部有某种不可见的覆盖层阻止了链接的执行？

这是我的代码

<a class="fancybox" href="test" style="display:none;">ddd</a>
        <div id="test" style="display:none;height:600;width:750px;">
                        <?php
        global $blog_id,$wpdb;
        // query the DB to retrieve the post 'termsofservice' from the localized sites posts table
        $tnc_notification = $wpdb->get_var( $wpdb->prepare( "select post_content from wp_posts where post_title='Terms & Conditions' and post_status='publish';" ) );
            echo "<p>TERMS and CONDITIONS have changed, please read the new terms and conditions.  By closing this window you automatically accept them</p>";

                    echo '<a href="javascript:jQuery.fancybox.close();">Accept </a> ';

                    echo "<p>".$tnc_notification."</p>";
        ?>

<script type="text/javascript" language="javascript">
function callTNC(){
            jQuery(document).ready(function() {
                    jQuery("#test").fancybox({
                                                'closeBtn': false,
                                                'closeClick': false,
                                                'modal': true,
                                                'maxHeight': 600,
                                                'maxWidth': 750,
                                                afterClose : function (){
                                                    //add the user into the tnc accepted table
                                                    $.get("http://mysite.com/tncaccept.php");
                                                }
                    }).trigger('click');

            });
}

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

编辑找到的解决方案:好的，我设法解决了这个问题。您必须在链接中创建引用并在链接中具有实际的关闭函数jQuery(document).ready(function() 声明所以发生的事情是接受链接/按钮中的 JavaScript 没有正确调用 fancybox close。

因此，首先在接受链接/按钮中创建引用

echo '<a href="#" id="closeFancy">Accept</a> ';

然后在 fancybox 声明/初始化中创建函数:

<script type="text/javascript" language="javascript">
function callTNC(){
            jQuery(document).ready(function() { 
                                            jQuery("#closeFancy").click(function(){
                                                jQuery.fancybox.close();
                                                return false;
                                            });
                    jQuery("#test").fancybox({
                                                'closeBtn': false,
                                                'closeClick': false,
                                                'modal': true,
                                                'maxHeight': 600,
                                                'maxWidth': 750,
                                                helpers   : { 
                                                    overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
                                                },

                                                afterClose : function (){
                                                    //add the user into the tnc accepted table
                                                    $.get("http://mysite.com/tncaccept.php");
                                                }
                    }).trigger('click');
                                            //$("#acceptClose").click(function(){
                                            //    $.fancybox.close();
                                            //    return false;
                                            //});
            });
}