Question

这里的情景：
我想在表单的输入字段上应用日期选择器单击链接时，将打开包含表单的颜色框。

不知何故，日期选择器不起作用，所以我搜索了互联网我对此帖datepicker inside a thickbox感到困惑，其中发表了以下声明： JavaScript / jQuery在ColorBox内部无效。
它使我困惑，因为其他人似乎已经解决了这个问题。

我将显示颜色框调用的代码：

        <script type="text/javascript">
        $(document).ready(function() {
                $(".customer").colorbox(
                {
                  transition:'fade',
                    width:'750',
                    speed:'500',
                    height:'400',
                    iframe:true
                });
        });
        </script>

虽然我的错误控制台显示第一个}}之后缺少}}，但颜色框已成功打开;发生。

datepicker的代码：

<script type="text/javascript">$(document).ready(function() {
    $('.datepick').datepicker({
    changeYear:true,
    yearRange:'c-65:c+0',
    changeMonth:true
    });
    $('.datepick').datepicker($.datepicker.regional['nl']);});</script>

此代码可以在我的网站上的其他位置工作，它不在彩色框中。

我尝试过：

我试图给类datepick一个10000或更高的z-index，因为colorbox默认的z-index为9999。
我尝试了颜色框上的oncomplete函数（），但是在应用时无法使颜色框工作。
我尝试将iframe设置为false并结合之前的两个选项。

我的问题：

是否可以在彩盒内使用日期选择器？
我的彩色盒代码是否正确？
如何解决？！

更新
解决方案：我犯了一个愚蠢的错误：P ...
然而，我在第一个问题上找到了答案，这可能有一些价值。

是的，可以在不使用onComplete：function（）的情况下在colorbox中使用日期选择器。

Answer 1

你加载的iframe是否包含datepicker实例化代码？

我的假设是：

你有一个class="customer"
此锚点有一个href，指向要在彩色框中显示的页面
此页面加载iframe（由于iframe:true）
并且此页面没有您的datepicker实例化代码

最简单的方法是将datepicker代码移动到customer页面的onready函数。

Answer 2

如ColorBox documentation中所述：

这通常是因为在将元素加载到文档之前尝试访问该元素，并且可以通过将JavaScript移动到ColorBox的onComplete回调中来解析。

示例（使用jQuery Forms插件）：

$('#login_window').colorbox({
    ...
    onComplete:function(){
        $('form#login').ajaxForm();
}});

您可以调整示例以加载日期选择器。

Answer 3

我遇到了同样的问题。我使用一个ID作为选择器，但是colorbox复制了整个html内容，并且ID也是如此。因此，如果我使用$（'＃myid'）。doSomething（），则会出现错误，因为“ myid”已重复。多数民众赞成在。

使用更好的选择器，例如$（'＃colorbox .myidasclass'）。doSomething（）解决此问题。同样的问题是没有“ #colorbox”作为附加选择器的类选择器。

Datepicker不会在colorbox中运行

3 个答案: