Colorbox打破<form>

Question

我第一次使用Colorbox.js，并且在弹出窗口中放置简报注册时遇到问题。我正在将colorbox分配给我的元素.newsletter-popup并且它正常工作，但是如上所述，<form>内部不起作用。我已经测试了表单，并且在没有通过colorbox加载时它可以正常工作吗？

此外，在我的页面的源代码中，我可以看到一些自动生成的颜色框代码#cboxOverlay和#colorbox，为什么当我已经将颜色框分配给我自己的元素时会出现这些代码？我也无法在我的元素上设置colorbox的选项，因为它们不起作用。设置不正确吗？

工作示例（3秒后出现）：http://development.ozonecoffee.co.uk/our-journal/

JS

setTimeout(function(){
    jQuery('.newsletter-popup').colorbox({
        trapFocus: false,
        closeButton: true,
        onComplete: function(){ $("#email").focus(); }
    });
}, 3000);

// Close button
$( ".close-popup" ).click(function() {
    $.colorbox.remove();
});

HTML

<div class="newsletter-popup">
        <div class="modal">
            <div class="close-popup"><span>X</span></div>
            <div class="container">
                <h4>Title</h4>
                <form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&amp;id=3caae1521b" method="get">
                    <input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
                    <input type="submit" value="Sign up" name="subscribe" >
                </form>         
            </div>
        </div>
    </div>