Question

出于某种原因，我现在无法在我的新闻稿输入字段中输入文本，因为我将其显示在fancybox弹出窗口中。知道问题是什么以及如何解决这个问题？见http://jsfiddle.net/6G8YR/ 非常感谢，

function openFancybox() {
    setTimeout( function() {$('#newspopup').trigger('click'); },1000);

}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 0.0001 });
    $('#newspopup').fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

});

$(document).on('click', function(e) {
    if(e.target === $('.visitwebsitebtn')[0]) {
        $.fancybox.close();
    }
});

Answer 1

好的，我发现了问题，但只遇到了其他类型的问题。问题是，有一个事件存在，导致您的fancybox每次碰巧点击它时都会刷新。

这就是您无法在输入中写入任何内容的原因。我有一个非常难看的临时解决方案，但它确实有效。

$('#email').on('click', function(e){
    e.stopPropagation();
});

点击电子邮件输入后，您的fancybox将不会引用。我尝试将此应用到您的 #newspopup ，但是它集合了 $（'＃newspopup'）。触发器（'click'）; 因此您的fancybox从未在开始时打开。< / p>

这是Demo

其他信息：

之前我曾使用fancybox插件，但我从未遇到过这个问题。您可能想要为您的fancybox添加选项..例如添加以下行：

'type':'iframe',

我会试过jsfiddle，但遗憾的是他们似乎不允许它。

Answer 2

您可以优化代码并摆脱不必要的click事件和触发器（因此您不会需要不必要的e.stopPropagation()方法），例如：

function openFancybox() {
    setTimeout(function () {
        $.fancybox('#newspopup', {
            modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(58, 42, 45, 0.3)'
                    }
                }
            },
            afterShow: function () {
                // enables a way to close fancybox
                $(".visitwebsitebtn").on("click", function () {
                    $.fancybox.close()
                });
            }
        });
    }, 1000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 7
    });
});

参见 JSFIDDLE

无法在输入字段中输入文本（在精美的框弹出窗口中）

2 个答案: