Question

我试图在fancybox（在localhost中）的模型弹出窗口中使用新的googles reCAPTCHA，但它没有出现。有什么想法吗？

var html = "<form method='post'><input type='text' name='nombre' autofocus required placeholder='Escribe tu nombre'/><br><input type='mail' name='mail' placeholder='Escribe tu correo'><br> <input type='tel' name='telefono' placeholder='Escribe tu teléfono'/><br><textarea  rows='5' cols='35' name='mensaje' required placeholder='Escribe tu mensaje'/></textarea><br><div align='center' class='g-recaptcha' data-theme='dark' data-sitekey='XXXX'></div> <input type='checkbox' required name='condiciones' value='condiciones' /> Acepto las <a href='/wordpress/politica-de-privacidad' target='_blank'>condiciones de uso</a> <br /><input type='submit' value='Enviar' /></form>";
        $(".contacto").fancybox({
            'width': 600,
            'height': 500,
            'autoSize': false,
            type: "html",
            content: html,
            helpers: {
                overlay: {
                    locked: false,
                    css: {
                        'background': 'rgba(0, 0, 0, 0.55)',    
                    }
                }
            }
        });

Answer 1

在使用目标验证码元素创建Fancybox后，您似乎需要动态渲染ReCAPTCHA。因此，请确保您已包含必要的javascript（https://www.google.com/recaptcha/api.js?render=explicit），然后使用渲染函数，如下所示：

grecaptcha.render(
'targetelement', {
'sitekey' : 'XXXX',
'theme' : 'dark'
}
);

有关更多示例/可用参数，请参阅 https://developers.google.com/recaptcha/docs/display?csw=1#example https://developers.google.com/recaptcha/docs/display?csw=1#render_param

Answer 2

@Muggles，我的新代码。您可以复制并粘贴Sublime Text（或其他文本编辑器）。

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
</head>
<body>
    <a class="contacto">Contacto</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var onloadCallback = function () {
                grecaptcha.render('html_element', {
                    'sitekey': '6LflpAUTAAAAANmiwCBqE_EdNVkOitOFmGLoc9LG'
                });
            };
            var html = "<form method='post'> <div id='html_element'></div></form>";
            $(".contacto").fancybox({
                'width': 600,
                'height': 500,
                'autoSize': false,
                type: "html",
                content: html,
                helpers: {
                    overlay: {
                        locked: false,
                        css: {
                            'background': 'rgba(0, 0, 0, 0.55)',

                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

Google reCAPTCHA无法在Fancybox中使用

2 个答案: